import * as React from 'react';
import { FastTable } from 'components/ui';
import useTable from './useTable';
import { TableTypes } from './types';

function Table(props: TableTypes.TableProps) {
  const {
    dataSource,
    pageInfo,
    columns,
    scroll,
    actionList,
    rowSelection,
    total,
    loading,
    handlers,
    notPagination,
    createActionBtns,
    selectedRowKeys,
  } = useTable(props);

  return (
    <div className="table">
      <div className="flex flex-right">{createActionBtns(actionList)}</div>
      <FastTable
        scroll={scroll}
        className="mt-8"
        dataSource={dataSource}
        columns={columns}
        rowSelection={rowSelection ? {
          ...(rowSelection as TableTypes.RowSelection),
          selectedRowKeys,
          onChange: handlers.handleSelectChange,
        } : undefined}
        bordered
        sticky
        rowKey={rowSelection ? (rowSelection as TableTypes.RowSelection).key : null}
        loading={loading}
        pagination={notPagination ? false : {
          current: pageInfo.page,
          pageSize: pageInfo.limit,
          total,
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: handlers.handlePageChange,
        }}
      />
    </div>
  );
}

export default Table;