import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
const provinceData = [ 'Zhejiang', 'Hubei', 'Jiangsu' ];
const cityData = {
  Zhejiang: [ 'Hangzhou', 'Ningbo', 'Wenzhou' ],
  Hubei: [ 'Wuhan', 'Yichang', 'Jingzhou' ],
  Jiangsu: [ 'Nanjing', 'Suzhou', 'Zhenjiang' ],
};
interface PageStates {
  data: Array<any>;
  disabled: boolean;
  province: string;
  city: string;
}
class Demo extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      disabled: true,
      province: '',
      city: '',
    };

    this.handleProvinceChange = this.handleProvinceChange.bind(this);
    this.handleCityChange = this.handleCityChange.bind(this);
  }

  handleProvinceChange(value) {
    const data = cityData[value];
    this.setState({ data, province: value, city: '', disabled: !data });
  }

  handleCityChange(value) {
    this.setState({ city: value });
    console.log(this.state.province, value);
  }

  render() {
    const { data, disabled, province, city } = this.state;

    return (
      <div>
        <Select
          placeholder="Select Province"
          dataSource={provinceData}
          value={province}
          onChange={this.handleProvinceChange}
          style={{ marginRight: 8 }}
        />
        <Select
          placeholder="Select City"
          dataSource={data}
          value={city}
          onChange={this.handleCityChange}
          disabled={disabled}
        />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('select-demo-5'));