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

// 生成 transfer 数据源
const generateTransferDataSource = j => {
  const result = [];
  for (let a = 0; a < j; a++) {
    result.push({
      label: `Quotation Nano ${a}`,
      value: `${100306660940 + a}`,
    });
  }
  return result;
};

const TransferDataSource = generateTransferDataSource(3);


// datasource 转换
const transferToTable = dataSource => {
  const newTableDataSource = dataSource.map(v => ({
    label: v.label,
    id: v.value,
  }));

  return newTableDataSource;
};

const TableDataSource = transferToTable(TransferDataSource);

const render = (value, index, record) => {
  return <a href="javascript:;">Remove({record.id})</a>;
};

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


class Demo extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: [],
      leftTableDataSource: TableDataSource,
      rightTableDataSource: [],
      rselectedRowKeys: [],
      lselectedRowKeys: [],
      theme: 'white',
    };
  }

  handleChange = (value, data, extra) => {
    console.log('handleChange', value, data, extra);
    this.setState({
      leftTableDataSource: transferToTable(extra.leftData),
      rightTableDataSource: transferToTable(data),
      rselectedRowKeys: [],
      lselectedRowKeys: [],
    });
  };

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


  render() {
    const {
      leftTableDataSource,
      rightTableDataSource,
      rselectedRowKeys,
      lselectedRowKeys,
      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={TransferDataSource}
            theme={theme}
            // titles= {[ '1', '2' ]}
            onChange={this.handleChange}
            // @ts-ignore
            showCheckAll={false}
            showTable
            className="table-transfer-demo"
          >
            {({ position, onChange }) => {
              // console.log(position, onChange, value, dataSource);
              if (position === 'left') {
                return (
                  <div>
                    <Table
                      dataSource={leftTableDataSource}
                      rowSelection={{
                        onChange: (selectedRowKeys, records) => {
                          console.log(selectedRowKeys, records);
                          this.setState(
                            {
                              lselectedRowKeys: selectedRowKeys,
                            },
                            () => {
                              onChange(position, selectedRowKeys);
                            },
                          );
                        },
                        selectedRowKeys: lselectedRowKeys,
                      }}
                    >
                      <Table.Column title="Label" dataIndex="label" width={150} />
                      <Table.Column title="Id" dataIndex="id" width={150} />
                      <Table.Column cell={render} width={200} />
                    </Table>
                  </div>
                );
              }
              return (
                <Table
                  dataSource={rightTableDataSource}
                  rowSelection={{
                    onChange: (selectedRowKeys, records) => {
                      console.log(selectedRowKeys, records);
                      this.setState(
                        {
                          rselectedRowKeys: selectedRowKeys,
                        },
                        () => {
                          onChange(position, selectedRowKeys);
                        },
                      );
                    },
                    selectedRowKeys: rselectedRowKeys,
                  }}
                >
                  <Table.Column title="Label" dataIndex="label" width={150} />
                </Table>
              );

            }}
          </Transfer>
        </div>
      </div>
    );
  }
}

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