import Button from '../../button';
import Checkbox from '../../checkbox';
import Dialog from '../../dialog';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';

const { Group } = Checkbox;
const dataSource = () => {
    const result = [];
    for (let i = 0; i < 5; i++) {
      result.push({
        title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
        id: 100306660940 + i,
        time: 2000 + i,
      });
    }
    return result;
  },
  cols = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: 'Title',
      dataIndex: 'title',
    },
    {
      title: 'Time',
      dataIndex: 'time',
    },
  ];

class App extends React.Component {
  changedCols = undefined;

  state = {
    dataSource: dataSource(),
    cols,
  };

  openDialog = () => {
    Dialog.alert({
      content: this.renderControlContent(),
      title: 'Select columns',
      onOk: () => {
        this.setState({
          cols: this.changedCols || this.state.cols,
        });
        return true;
      },
    });
  };

  onChange = value => {
    this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);
  };

  renderControlContent() {
    const groupSource = cols.map(col => {
        return {
          label: col.title,
          value: col.dataIndex,
        };
      }),
      defaultValue = this.state.cols.map(col => col.dataIndex);
    return (
      <Group
        dataSource={groupSource}
        onChange={this.onChange}
        defaultValue={defaultValue}
      />
    );
  }

  renderCols() {
    const { cols } = this.state;
    return cols.map(col => {
      return (
        <Table.Column
          title={col.title}
          dataIndex={col.dataIndex}
          key={col.dataIndex}
        />
      );
    });
  }

  render() {
    return (
      <div>
        <p>
          <Button onClick={this.openDialog}> Select columns </Button>
        </p>
        <Table dataSource={this.state.dataSource}>{this.renderCols()}</Table>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('table-demo-18'));