import React, { Component } from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
import CitySelect from 'react-native-city-select'
import CITY from './cityData.js'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isVisable: false,
      cityText: '',
      cityId: '',
    }
  }

  handleChangeCityStatus=()=>{
    this.setState({
      isVisable: !this.state.isVisable,
    })
  }

  handleCitySelect=(cityObj)=> {
    this.setState({
      isVisable: false,
      cityText: cityObj.cityName,
      cityId: cityObj.cityId,
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={this.handleChangeCityStatus}
        >
          <Text>
            click me!
          </Text>
        </TouchableOpacity>
        <Text>
          {this.state.cityText}{this.state.cityId}
        </Text>
        <CitySelect
          isVisable={this.state.isVisable}
          cancelCity={this.handleChangeCityStatus}
          selectCity={this.handleCitySelect}
          cityData={CITY}
          selectedId={this.state.cityId}
          cityGrid={2}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
});

  const CITY = {
    A: [
      {
        cityId: '279',
        cityName: '阿坝',
        cityNameEn: 'Aba',
      },
      {
        cityId: '329',
        cityName: '安康',
        cityNameEn: 'Ankang',
      },
      ...
    ],
    ...
  }