import React from 'react';
import ReactDOM from 'react-dom';
import Transfer from '..';
import { Radio } from '../..';

const treeDataSource = [
  {
    label: 'Form',
    key: '2',
    value: '2',
    children: [
      {
        label: 'Input',
        key: '4',
        value: '4',
      },
      {
        label: 'Field',
        key: '7',
        value: '7',
      },
      {
        label: 'Select',
        key: '5',
        value: '5',
      },
    ],
  },
  {
    label: 'Display',
    key: '3',
    value: '3',
    children: [
      {
        label: 'Table',
        key: '6',
        value: '6',
      },
    ],
  },
  {
    label: 'Data',
    key: '8',
    value: '8',
    disabled: true,
  },
];

const themeList = [{
  value: 'white',
  label: 'white',
}, {
  value: 'grey',
  label: 'grey',
}];

interface ItransferState {
  theme?: 'white' | 'grey'
}


class Demo extends React.Component<any, ItransferState> {

  constructor(props) {
    super(props);

    this.state = {
      theme: 'white',
    };
  }

  handleTheme = theme => {
    this.setState({ theme });
  };

  render() {

    const { theme } = this.state;
    return (
      <div>
        <span className="demo-label">Select theme：</span>
        <Radio.Group
          defaultValue="medium"
          dataSource={themeList}
          value={this.state.theme}
          onChange={this.handleTheme}
        />
        <br />
        <br />
        <div className={theme}>
          <Transfer
            dataSource={treeDataSource}
            showTreeSelect
            theme={theme}
            titles={[ 'TreeSeletable', 'TreeSeletable' ]}
          >
          </Transfer>
        </div>
      </div>
    );
  }
}

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