import Box from '../../box';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
import Table from '..';

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;
  },
  render = (value, index, record) => {
    return <a>Remove({record.id})</a>;
  };

type AlignType = 'left' | 'right' | 'center';
interface IAppState {
  dataSource: any;
  className: string;
  align: AlignType;
  isZebra?: boolean;
  hasBorder?: boolean;
}

class App extends React.Component<{}, IAppState> {
  state = {
    dataSource: dataSource(),
    className: '',
    align: 'left' as AlignType,
  } as IAppState;

  toggleZebra() {
    this.setState({
      isZebra: !this.state.isZebra,
    });
  }
  toggleBorder() {
    this.setState({
      hasBorder: !this.state.hasBorder,
    });
  }
  makeBeauty() {
    this.setState({
      className: 'beauty',
    });
  }
  makeAlign() {
    this.setState({
      align: 'right',
    });
  }
  render() {
    return (
      <span>
        <Box direction="row" spacing={20}>
          <Button onClick={this.toggleZebra.bind(this)}> Toggle zebra </Button>
          <Button onClick={this.toggleBorder.bind(this)}> Toggle border</Button>
          <Button onClick={this.makeBeauty.bind(this)}>
            {' '}
            Make second column beauty{' '}
          </Button>
          <Button onClick={this.makeAlign.bind(this)}>
            {' '}
            Make first column align right{' '}
          </Button>
        </Box>
        <br />
        <Table
          dataSource={this.state.dataSource}
          isZebra={this.state.isZebra}
          hasBorder={this.state.hasBorder}
        >
          <Table.Column title="Id" dataIndex="id" alignHeader="center" />
          <Table.Column
            title="Title"
            dataIndex="title"
            align={this.state.align}
            className={this.state.className}
          />
          <Table.Column title="Time" dataIndex="time" />
          <Table.Column cell={render} width={200} />
        </Table>
      </span>
    );
  }
}

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