import Cascader from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
const RadioGroup = Radio.Group;
interface PageStates {
  triggerType: string;
  data: Array<any>;
}
class Demo extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);

    this.state = {
      triggerType: 'click',
      data: [],
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);
  }

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

  handleChange(value, data, extra) {
    console.log(value, data, extra);
  }

  handleTriggerTypeChange(triggerType) {
    this.setState({
      triggerType,
    });
  }

  render() {
    return (
      <div>
        <div className="trigger-check">
          <RadioGroup
            dataSource={[ 'click', 'hover' ]}
            shape="button"
            value={this.state.triggerType}
            onChange={this.handleTriggerTypeChange}
          />
        </div>
        <Cascader
          expandTriggerType={this.state.triggerType as 'hover' | 'click'}
          dataSource={this.state.data}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('cascader-demo-2'));