import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import TreeSelect from '..';
const TreeNode = TreeSelect.Node;


interface PageStates {
  size: string;
}
class Demo extends React.Component<{}, PageStates> {
  constructor(props) {
    super(props);
    this.state = {
      size: 'medium',
    };

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

  handleChange(value, data) {
    console.log(value, data);
  }
  handleSize = size => {
    this.setState({ size });
  };

  render() {
    const { size } = this.state;
    return (
      <div>
        <Radio.Group shape="button" value={size} onChange={this.handleSize}>
          <Radio value="xs">xs</Radio>
          <Radio value="small">small</Radio>
          <Radio value="medium">medium</Radio>
          <Radio value="large">large</Radio>
        </Radio.Group>
        <br />
        <br />

        <TreeSelect
          treeDefaultExpandAll
          onChange={this.handleChange}
          style={{ width: 200 }}
          size={size as 'small' | 'medium' | 'large'}
        >
          <TreeNode key="1"
            // @ts-ignore
            value="1"
            label="Component">
            <TreeNode key="2"
              // @ts-ignore
              value="2" label="Form">
              <TreeNode key="4"
                // @ts-ignore
                value="4" label="Input" />
              <TreeNode key="5"
                // @ts-ignore
                value="5" label="Select" disabled />
            </TreeNode>
            <TreeNode key="3"
              // @ts-ignore
              value="3" label="Display">
              <TreeNode key="6"
                // @ts-ignore
                value="6" label="Table" />
            </TreeNode>
          </TreeNode>
        </TreeSelect>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('tree-select-demo-1'));