import CitySelect from "react-native-city-select"

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

class Example extends Component {
  constructor(props) {
    super(props)

    this.state = {
      cityStatus: false,
      cityText: '',
      cityId: '',
    }

    this.handleCityCancel = this.handleCityCancel.bind(this)
    this.handleCitySelect = this.handleCitySelect.bind(this)
    this.handleCityPress = this.handleCityPress.bind(this)
  }

  handleCityPress() {
    this.setState({
      cityStatus: true,
    })
  }

  handleCitySelect(cityObj) {
    this.setState({
      cityStatus: false,
      cityText: cityObj.cityName,
      cityId: cityObj.cityId,
    })
  }

  handleCityCancel() {
    this.setState({
      cityStatus: false,
    })
  }

  renderCitySelect() {
    if (this.state.cityStatus) {
      return (
        <CitySelect
          cancelCity={this.handleCityCancel}
          selectCity={this.handleCitySelect}
          cityData={CITY}
        />
      )
    }
  }

  render() {
    return (
      <TouchableOpacity
        onPress={this.handleCityPress}
      >
        <Text>
          click me!
        </Text>
      </TouchableOpacity>
    )
  }

}