import './demo6.css';
import 'whatwg-fetch';
import Cascader from '..';
import Checkbox from '../../checkbox';
import React from 'react';
import ReactDOM from 'react-dom';
interface PageStates {
  checkStrictly: boolean;
  data: Array<any>;
  value:Array<any>;
}
class Demo extends React.Component <{}, PageStates> {
  handleCheck: () => void;
  handleChange: (value: any, data: any, extra: any) => void;
  constructor(props) {
    super(props);

    this.handleCheck = () => {
      this.setState({
        checkStrictly: !this.state.checkStrictly,
      });
    };
    this.handleChange = (value, data, extra) => {
      console.log(value, data, extra);
    };
    this.state = {
      value: [],
      data: [],
      checkStrictly: false,
    };
  }

  componentDidMount() {
    fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
      .then(response => response.json())
      .then(data => this.setState({ data, value: [ '2975' ] }))
      .catch(e => console.log(e));
  }

  render() {
    return (
      <div className="control-multiple-demo">
        <label className="strictly-check">
          <Checkbox
            checked={this.state.checkStrictly}
            onChange={this.handleCheck}
          />
          <span className="strictly-text">Enable checkStrictly</span>
        </label>
        <Cascader
          multiple
          checkStrictly={this.state.checkStrictly}
          dataSource={this.state.data}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('cascader-demo-6'));