import React, { useState } from 'react';
import { Button, Icon, Table, Card, Field, Pagination, Form } from '@alifd/next';
import { useFullscreen, useFusionTable } from 'ahooks';
import classnames from 'classnames';
import { ITablePro_PC } from './type';
import { getTableDataFunc } from './model';
import './index.scss';

const FormItem = Form.Item;

const TableActionIcon = Icon.createFromIconfontCN({
  scriptUrl: 'https://at.alicdn.com/t/font_1899388_oxn3zhg34oj.js',
});

const TablePro: ITablePro_PC = (props) => {
  const {
    columns = [],
    getListUri,
    getListHandle,
    actionBar,
    filterBar = [],
    filterPerLineNumber = 4,
    simple = false,
    actionColumn = [],
    actionColumnWidth,
    onReset,
    ...restTableProps
  } = props;

  const renderActionBar = !!(actionBar && actionBar.length);
  const renderFilterBar = !!(filterBar && filterBar.length);
  const renderActionColumn = !!(actionColumn && actionColumn.length);
  const colSpan = 12 / filterPerLineNumber;

  const ActionBar = ({ hiddenRightAction = false }) => {
    return (
      <div className="oc-action-bar">
        <div className="oc-button-group">
          {renderActionBar &&
            actionBar?.map((action, index) => {
              const { icon, title, render, ...restProps } = action;
              return (
                <div className="oc-button-group-item" key={`actionBarBtn_${title}_${index}`}>
                  {!!render ? (
                    render
                  ) : (
                    // @ts-ignore
                    <Button {...restProps}>
                      {icon && typeof icon === 'string' ? <Icon type={icon} /> : icon}
                      {title}
                    </Button>
                  )}
                </div>
              );
            })}
        </div>
        {!hiddenRightAction && (
          <div className="oc-right-button-group">
            <Button text onClick={() => changeSize((prev) => (prev === 'medium' ? 'small' : 'medium'))}>
              <TableActionIcon type="narrow" size="small" />
            </Button>
            <Button text onClick={() => changeZebra((prev) => !prev)}>
              <TableActionIcon type="zebra" size="small" />
            </Button>
            <Button text onClick={toggleFullscreen}>
              <TableActionIcon type="fullscreen" size="small" />
            </Button>
          </div>
        )}
      </div>
    );
  };

  // 切换紧凑模式
  const [sizeStatus, changeSize] = useState<'small' | 'medium'>('small');

  // 切换斑马线
  const [zebraStatus, changeZebra] = useState(false);

  // 切换全屏
  const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.getElementById('card-container'));

  const Container = classnames('oc-container', { fullscreen: isFullscreen });

  // 表格操作列
  const columnPadding = 16;
  const fontSize = 12;
  const gutter = 10;
  const finalColumns = renderActionColumn
    ? [
        ...columns,
        {
          title: '操作',
          data: '_action',
          lock: 'right',
          width: !!actionColumnWidth
            ? actionColumnWidth
            : actionColumn.reduce(
                (previousValue, currentValue) =>
                  previousValue + (currentValue.title as string).length + (currentValue.icon ? 2 : 0),
                0,
              ) *
                fontSize +
              columnPadding * 2 +
              (actionColumn.length - 1) * gutter,
          cell: (value: any, index: any, record: any) => {
            return (
              <div>
                {actionColumn.map((action, i, arr) => {
                  const { icon, title, hidden = () => {}, onClick = () => {}, color, ...restProps } = action;
                  const isHidden = hidden({ value, index, record });
                  const lastOne = arr.length - 1 === i;

                  return (
                    <Button
                      style={{
                        fontSize,
                        color,
                        marginRight: lastOne ? 0 : gutter,
                        display: isHidden ? 'none' : 'inline-block',
                      }}
                      key={`actionColumnBtn_${title}_${index}`}
                      text
                      {...restProps}
                      // @ts-ignore
                      onClick={() => onClick({ value, index, record })}
                    >
                      {icon && typeof icon === 'string' ? <Icon type={icon} /> : icon}
                      {title}
                    </Button>
                  );
                })}
              </div>
            );
          },
        },
      ]
    : [...columns];

  // 获取表格数据
  let getTableList;

  if (!!getListHandle) {
    getTableList = getListHandle;
  } else if (!!getListUri) {
    getTableList = getTableDataFunc(getListUri);
  } else {
    getTableList = () => {};
  }

  const field = Field.useField([]);
  const useTable = useFusionTable(getTableList, { field });
  const { paginationProps, tableProps, search, refresh, run, runAsync } = useTable;
  TablePro.onRefresh = refresh;
  TablePro.run = run;
  TablePro.runAsync = runAsync;
  const { submit, reset } = search;

  const SimpleTable = () => {
    return (
      <Table.StickyLock
        {...tableProps}
        hasBorder
        columns={finalColumns}
        size={sizeStatus}
        isZebra={zebraStatus}
        {...restTableProps}
      />
    );
  };

  if (simple) {
    return (
      <div>
        <ActionBar hiddenRightAction />
        <SimpleTable />
      </div>
    );
  }

  return (
    <div className={Container}>
      {renderFilterBar && (
        <Card className="oc-filter" hasBorder={false} free style={{ marginBottom: 16 }}>
          <Card.Content>
            <Form responsive fullWidth field={field} labelAlign="inset" colon>
              {filterBar.map((filter) => {
                return (
                  <FormItem
                    colSpan={filter.colSpan ? filter.colSpan : colSpan}
                    labelWidth={'auto'}
                    {...filter}
                    key={filter.name}
                  />
                );
              })}
              <FormItem
                colSpan={
                  12 -
                  (filterBar.reduce(
                    (previousValue, currentValue) =>
                      previousValue + (currentValue?.colSpan ? currentValue.colSpan : colSpan),
                    0,
                  ) %
                    12)
                }
                className="oc-form-actions"
              >
                <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: 10 }}>
                  <Icon type={'search'} />
                  查询
                </Form.Submit>
                <Form.Reset onClick={onReset ? () => onReset(reset) : reset}>
                  <Icon type={'refresh'} />
                  重置
                </Form.Reset>
              </FormItem>
            </Form>
          </Card.Content>
        </Card>
      )}
      <Card className="oc-table" hasBorder={false} free id={'card-container'}>
        <Card.Content id={'content'}>
          <ActionBar />
          <SimpleTable />
          <Pagination
            size={sizeStatus}
            shape={'arrow-only'}
            showJump={false}
            style={{ marginTop: 16, textAlign: 'right' }}
            totalRender={(t, range) => `共${t}项，当前显示${range[0]}-${range[1]}项`}
            pageSizeSelector={'filter'}
            pageSizePosition={'end'}
            pageSizeList={[10, 20, 50]}
            {...paginationProps}
          />
        </Card.Content>
      </Card>
    </div>
  );
};

TablePro.Column = Table.Column;

export default TablePro;