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

const dataSource = (() => {
  const dataSource = [];

  for (let i = 0; i < 10; i++) {
    dataSource.push({
      label: `content${i}`,
      value: `${i}`,
      disabled: i % 4 === 0,
    });
  }

  return dataSource;
})();

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

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

class Demo extends React.Component<{}, ItransferState> {
  constructor(props) {
    super(props);

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

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

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

  handleSelect(sourceSelectedValue, targetSelectedValue, trigger) {
    console.log('in panel: ', trigger);
    console.log('sourceSelectedValue are: ', sourceSelectedValue);
    console.log('targetSelectedValue are: ', targetSelectedValue);
  }

  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
            defaultValue={[ '3' ]}
            theme = {theme}
            dataSource={dataSource}
            defaultLeftChecked={[ '1' ]}
            onChange={this.handleChange}
            titles={[ 'Title', 'Title' ]}
            // @ts-ignore
            onSelect={this.handleSelect}
          />
        </div>
      </div>
    );
  }
}

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