import React, { useState } from 'react';
import './index.less';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';

import TableToolbar from './components/tabletoolbar';
import Tables from './components/tables';

export interface configItem {
  text: string;
  render?: (node: React.ReactNode) => React.ReactNode;
}

export interface IProps {
  toolBarShow?: boolean | undefined;
  toolBarRender?: React.ReactNode[];
  configs?: configItem[];
  tableConfig?: any;
  draggable?: boolean | (() => boolean);
  onSearch?: (value: string) => void;
  onSortEnd?: (oldIndex: number, newIndex: number) => void;
  plainOptions?: any;
  checkedOptions?: string[];
  onCheckColumns?: (e: any) => void;
  handleNewDrop?: (data: any) => void;
  onClickToolbar?: (key: string) => void;
}

const SeniortTable: React.FC<IProps> = (props: IProps) => {
  const [tablesize, setTableSize] = useState('small');

  const {
    onSearch,
    onSortEnd,
    onCheckColumns,
    handleNewDrop,
    onClickToolbar,
    toolBarShow,
    toolBarRender,
    configs,
    tableConfig,
    draggable,
    plainOptions,
    checkedOptions,
  } = props;

  const handleSearch = (value: string, e: any) => {
    if (onSearch) onSearch(value);
  };

  const handleChangeSize = (item: any) => {
    setTableSize(item.key);
  };

  const handleOnSortEnd = (oldIndex: number, newIndex: number) => {
    if (onSortEnd) onSortEnd(oldIndex, newIndex);
  };

  let newcolumns = tableConfig.columns || [];

  const handleCheckColumns: (e: any) => void = (e: any) => {
    if (onCheckColumns) onCheckColumns(e);
  };

  const handleClickToolbars = (key: string) => {
    if (onClickToolbar) onClickToolbar(key);
  };

  return (
    <>
      <ConfigProvider locale={zhCN}>
        {toolBarShow ? (
          <TableToolbar
            onSearch={handleSearch}
            toolBarRender={toolBarRender}
            configs={configs}
            tablesize={tablesize}
            handleChangeSize={handleChangeSize}
            columns={[...newcolumns]}
            plainOptions={plainOptions || []}
            checkedOptions={checkedOptions || []}
            handleCheckColumns={handleCheckColumns}
            handleNewDrop={handleNewDrop}
            handleClickToolbar={handleClickToolbars}
          />
        ) : null}
        <div style={{ padding: `10px`, background: '#FFF' }}>
          <Tables
            tablesize={tablesize}
            tableConfig={tableConfig}
            draggable={draggable}
            handleOnSortEnd={handleOnSortEnd}
          />
        </div>
      </ConfigProvider>
    </>
  );
};

export default SeniortTable;