import 'whatwg-fetch';
import Cascader from '..';
import React from 'react';
import ReactDOM from 'react-dom';
interface PageStates {
  label: string;
  data: Array<any>;
}
class Demo extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);

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

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

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

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

    this.setState({
      label: extra.selectedPath.map(d => d.label).join(' / '),
    });
  }

  render() {
    return (
      <div>
        <div
          className="cascader-value"
          style={{ marginBottom: '10px', fontSize: '14px', color: '#666' }}
        >
          Selected: {this.state.label}
        </div>
        <Cascader dataSource={this.state.data} onChange={this.handleChange} />
        <br/>
        <br/>
        <div style={{ backgroundColor: '#f3f3f3', padding: '10px' }}>
          <Cascader dataSource={this.state.data} theme='grey' onChange={this.handleChange} />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById('cascader-demo-1'));