import Radio from '../../radio';
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: {
        name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
      },
      id: 100306660940 + i,
      time: 2000 + i,
    });
  }
  return result;
};

const render = (value, index, record) => {
  return <a href='javascript:;'>Remove({record.id})</a>; // eslint-disable-line
};
interface PageState {
  size: string;
}
class Demo extends React.Component<{}, PageState> {
  constructor(props) {
    super(props);
    this.state = {
      size: 'small',
    };
  }

  handleSize = size => {
    this.setState({ size });
  };


  render() {
    const { size } = this.state;

    return (
      <div>
        <Radio.Group shape="button" value={size} onChange={this.handleSize}>
          <Radio value="xs">xs</Radio>
          <Radio value="small">small</Radio>
          <Radio value="medium">medium</Radio>
          <Radio value="large">large</Radio>
        </Radio.Group>
        <br />
        <br />
        <Table dataSource={dataSource()} size={size as 'small' | 'large' | 'medium' | 'xs'}>
          <Table.Column title="Id" htmlTitle="Unique Id" dataIndex="id" />
          <Table.Column title="Title" dataIndex="title.name" />
          <Table.Column title="Time" dataIndex="time" />
          <Table.Column cell={render} />
        </Table>
      </div >
    );
  }
}

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