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 React.createElement("a", { href: "javascript:;" },
        "Remove(",
        record.id,
        ")");
};
const themeList = [{
        value: 'white',
        label: 'white',
    }, {
        value: 'grey',
        label: 'grey',
    }];
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = (value, data, extra) => {
            console.log('handleChange', value, data, extra);
            this.setState({
                leftTableDataSource: transferToTable(extra.leftData),
                rightTableDataSource: transferToTable(data),
                rselectedRowKeys: [],
                lselectedRowKeys: [],
            });
        };
        this.handleTheme = theme => {
            this.setState({ theme });
        };
        this.state = {
            selectedValue: [],
            leftTableDataSource: TableDataSource,
            rightTableDataSource: [],
            rselectedRowKeys: [],
            lselectedRowKeys: [],
            theme: 'white',
        };
    }
    render() {
        const { leftTableDataSource, rightTableDataSource, rselectedRowKeys, lselectedRowKeys, theme, } = this.state;
        return (React.createElement("div", null,
            React.createElement("span", { className: "demo-label" }, "Select theme\uFF1A"),
            React.createElement(Radio.Group, { defaultValue: "medium", dataSource: themeList, value: this.state.theme, onChange: this.handleTheme }),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement("div", { className: theme },
                React.createElement(Transfer, { dataSource: TransferDataSource, theme: theme, 
                    // titles= {[ '1', '2' ]}
                    onChange: this.handleChange, 
                    // @ts-ignore
                    showCheckAll: false, showTable: true, className: "table-transfer-demo" }, ({ position, onChange }) => {
                    // console.log(position, onChange, value, dataSource);
                    if (position === 'left') {
                        return (React.createElement("div", null,
                            React.createElement(Table, { dataSource: leftTableDataSource, rowSelection: {
                                    onChange: (selectedRowKeys, records) => {
                                        console.log(selectedRowKeys, records);
                                        this.setState({
                                            lselectedRowKeys: selectedRowKeys,
                                        }, () => {
                                            onChange(position, selectedRowKeys);
                                        });
                                    },
                                    selectedRowKeys: lselectedRowKeys,
                                } },
                                React.createElement(Table.Column, { title: "Label", dataIndex: "label", width: 150 }),
                                React.createElement(Table.Column, { title: "Id", dataIndex: "id", width: 150 }),
                                React.createElement(Table.Column, { cell: render, width: 200 }))));
                    }
                    return (React.createElement(Table, { dataSource: rightTableDataSource, rowSelection: {
                            onChange: (selectedRowKeys, records) => {
                                console.log(selectedRowKeys, records);
                                this.setState({
                                    rselectedRowKeys: selectedRowKeys,
                                }, () => {
                                    onChange(position, selectedRowKeys);
                                });
                            },
                            selectedRowKeys: rselectedRowKeys,
                        } },
                        React.createElement(Table.Column, { title: "Label", dataIndex: "label", width: 150 })));
                }))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('transfer-demo-6'));
