import React, { useState, useEffect } from 'react';
import { Card, Table, Pagination, Divider, ResponsiveGrid, Button, Box, Form, Input, Select, Icon, Loading } from '@alifd/next';

import styles from './index.module.scss';

const { Cell } = ResponsiveGrid;
const { Option } = Select;
const FormItem = Form.Item;

export interface IDataSource {
  tableData: Array<Record<string, unknown>>;
  tableColumn: any;
}
const mockTableData: Array<Record<string, unknown>> = [];
for (let i = 0; i <= 10; i += 1) {
  mockTableData.push({
    name: `品牌营销服务设计 ${String.fromCharCode(97 + i).toUpperCase()}`,
    type: Math.random() > 0.5 ? '24小时页面' : 'Banner 广告A',
    demand: ['曾庆超', '阮小五', '公孙胜'][i % 3],
    interface: ['阮小二', '谢莉莉', '樊瑞'][i % 3],
    supplier: '博彦-李强',
    designer: ['李立', '曹正', '姚越洋'][i % 3],
  });
}

const DEFAULT_DATA: IDataSource = {
  tableData: mockTableData,
  tableColumn: {
    name: '需求名称',
    type: '类型数量',
    demand: '需求方',
    interface: '接口人',
    supplier: '供应商接口人',
    designer: '设计师',
  },
};

interface ITableListProps {
  dataSource: IDataSource;
}

const TableList: React.FunctionComponent<ITableListProps> = (props: ITableListProps): JSX.Element => {
  const {
    dataSource = DEFAULT_DATA,
  } = props;

  const [loading, setLoading] = useState(true);
  const [expand, setExpand] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  });

  const onOperation = () => {
    setLoading(true);
  };

  const onPaginationChange = () => {
    setLoading(true);
  };

  const toggleSeachList = () => {
    setExpand(!expand);
  };

  return (
    <>
      <Card free>
        <Card.Content>
          <Box padding={10}>
            <Form responsive fullWidth labelAlign="top">
              <FormItem colSpan={3} label="需求名称/编号">
                <Input
                  placeholder="输入需求名称/编号进行搜索"
                  innerAfter={<Icon type="search" size="xs" className={styles.searchIcon} />}
                />
              </FormItem>
              <FormItem colSpan={3} label="需求方">
                <Input placeholder="输入需求方进行搜索" />
              </FormItem>
              <FormItem colSpan={3} label="标签">
                <Select placeholder="选择标签">
                  <Option value="small">标签A</Option>
                  <Option value="medium">标签B</Option>
                </Select>
              </FormItem>
              {expand && (
                <>
                  <FormItem colSpan={3} label="需求名称/编号">
                    <Input
                      placeholder="输入需求名称/编号进行搜索"
                      innerAfter={<Icon type="search" size="xs" className={styles.searchIcon} />}
                    />
                  </FormItem>
                  <FormItem colSpan={3} label="需求方">
                    <Input placeholder="输入需求方进行搜索" />
                  </FormItem>
                  <FormItem colSpan={3} label="标签">
                    <Select placeholder="选择标签">
                      <Option value="small">标签A</Option>
                      <Option value="medium">标签B</Option>
                    </Select>
                  </FormItem>
                  <FormItem colSpan={3} label="标签">
                    <Select placeholder="选择标签">
                      <Option value="small">标签A</Option>
                      <Option value="medium">标签B</Option>
                    </Select>
                  </FormItem>
                </>
              )}
              <Cell colSpan={3} className={styles.btns}>
                <Box
                  spacing={8}
                  direction="row"
                  align="flex-end"
                  justify="center"
                  style={{ height: '100%' }}
                >
                  <Button type="primary" onClick={onOperation}>
                    查询
                  </Button>
                  <Form.Reset>重置</Form.Reset>
                  <Button onClick={toggleSeachList}>
                    {expand ? (
                      <>
                        收起 <Icon className={styles.icon} type="arrow-up" size="xs" />
                      </>
                    ) : (
                      <>
                        展开 <Icon className={styles.icon} type="arrow-down" size="xs" />
                      </>
                    )}
                  </Button>
                </Box>
              </Cell>
            </Form>
          </Box>
          <Divider dashed />
          <div className={styles.Main}>
            <Loading visible={loading} style={{ display: 'block' }}>
              <div className={styles.add}>
                <Button type="primary">新增</Button>
                <Button type="normal">下载</Button>
                <Button type="normal">
                  更多操作
                  <Icon className={styles.icon} type="arrow-down" />
                </Button>
              </div>
              <Table
                hasBorder={false}
                className={styles.Table}
                dataSource={dataSource.tableData}
                rowSelection={{ columnProps: () => ({ lock: 'left' }) }}
              >
                {Object.keys(dataSource.tableColumn).map((col) => (
                  <Table.Column title={dataSource.tableColumn[col]} dataIndex={col} key={col} />
                ))}
                <Table.Column
                  title="操作"
                  cell={() => (
                    <div className={styles.opt}>
                      <Button type="primary" text>
                        编辑
                      </Button>
                      <Divider direction="ver" />
                      <Button type="primary" text>
                        订阅
                      </Button>
                      <Divider direction="ver" />
                      <Button type="primary" text>
                        删除
                      </Button>
                    </div>
                  )}
                />
              </Table>
              <Box margin={[15, 0, 0, 0]} direction="row" align="center" justify="space-between">
                <div className={styles.total}>
                  共<span>200</span>条需求
                </div>
                <Pagination onChange={onPaginationChange} />
              </Box>
            </Loading>
          </div>
        </Card.Content>
      </Card>
    </>
  );
};

export default TableList;