import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Table, Button } from "../src/index";

import PropTypes from 'prop-types';
/* eslint-disable react/no-multi-comp,react/prop-types */
const { Header, Cell } = Table;

const columns = new Array(4).fill({
  dataIndex: 'data',
  title: 'Data',
  width: 200
})
columns.unshift({
  dataIndex: 'id',
  title: 'Id',
  width: 100,
  lock: 'left'
})
columns.push({
  dataIndex: 'state',
  title: 'State',
  width: 200
})
columns.push({
  title: 'Action',
  width: 100,
  align: 'center',
  cell: () => <Button>delete</Button>,
  lock: 'right'
})

const dataSource = [
  {
    id: 30000,
    data: '$13.02',
    state: 'normal'
  },
  {
    id: 30001,
    data: '$16.02',
    state: 'normal'
  },
  {
    id: 30002,
    data: '$63.0002',
    state: 'error'
  }
]

const dataSource1 = () => {
  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,
      expandable: i !== 2
    })
  }
  return result
},
expandedRowRender = (record, rowIndex) => {
  if (rowIndex === 0) {
    return record.title
  }
  return (
    <Table.StickyLock hasBorder={false} dataSource={dataSource1()}>
      <Table.Column title="Id" dataIndex="id" lock width={100} />
      <Table.Column title="Title" dataIndex="title" width={200} />
      <Table.Column title="Time" dataIndex="time" width={200} />
      <Table.Column title="Title" dataIndex="title" width={200} />
      <Table.Column title="Title" dataIndex="title" width={200} />
      <Table.Column title="Title" dataIndex="title" width={200} />
      <Table.Column title="Title" dataIndex="title" width={200} />
    </Table.StickyLock>
  )
},
render = (value, index, record) => {
  return <a>Remove({record.id})</a>
}
const AppHeader = (props, context) => {
  const { columns } = props
  const { onChange } = context
  const length = columns[columns.length - 1].length
  return (
    <Header {...props}>
      <tr>
        <Cell colSpan={length}>
          <a onClick={() => onChange(true)} href="javascript:;">
            Select all
          </a>
          &nbsp;
          <a onClick={() => onChange(false)} href="javascript:;">
            Unselect all
          </a>
        </Cell>
      </tr>
    </Header>
  )
}

AppHeader.contextTypes = {
  onChange: PropTypes.func
}

const onRowChange = (selectedKeys) => {
  this.setState({
    selectedKeys
  })
}
storiesOf("Table", module).add("Table", () => {
  this.state = {
    selectedKeys: []
  }

  return (
    <div id='app-wrapper'>
      <div id='app'>
        <Table
          dataSource={dataSource}
          cellProps={(rowIndex, colIndex) => {
            if (colIndex === 0) {
              return {
                colSpan: 1,
                rowSpan: 2
              }
            }
            if (colIndex === columns.length - 1) {
              return {
                colSpan: 1,
                rowSpan: 3
              }
            }
          }}
        >
          {columns.map((col, i) => {
            return <Table.Column key={i} {...col} />
          })}
        </Table>
        <Table.StickyLock
          expandedIndexSimulate
          dataSource={dataSource1()}
          hasBorder={false}
          // expandedRowIndent 仅在IE下才会生效，非IE模式下为[0,0]且不可修改
          expandedRowIndent={[2, 0]}
          expandedRowRender={expandedRowRender}
          rowExpandable={(record) => record.expandable}
          onRowClick={() => console.log('rowClick')}
          size='small'
        >
          <Table.Column title="Id" dataIndex="id" lock width={100} />
          <Table.Column title="Title" dataIndex="title" width={200} />
          <Table.Column title="Time" dataIndex="time" width={200} />
          <Table.Column cell={render} width={300} />
        </Table.StickyLock>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <Table
          dataSource={dataSource1()}
          components={{
            Header: AppHeader
          }}
          rowSelection={{
            selectedRowKeys: this.state.selectedKeys,
            onChange: onRowChange
          }}
        >
          <Table.Column title="Id" dataIndex="id" />
          <Table.Column title="Title" dataIndex="title" />
          <Table.Column title="Title2" dataIndex="title" />
          <Table.Column title="Time" dataIndex="time" />
          <Table.Column title="Time2" dataIndex="time" />

        </Table>
        <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      </div>
    </div>
  );
});