import { useState } from 'react';
import { QueryData } from '../types/query';
import { Moment } from 'moment';
import { TableProps, TablePaginationConfig } from 'antd/es/table';

export type UseTableResult<T = any> = {
  tableProps: TableProps<T>;
  queryData: QueryData;
  handleSearch: (value: string) => void;
  handleRangePicker: (dates: [Moment, Moment]) => void;
};

export function formatQueryDates(dates: [Moment, Moment]) {
  return [dates[0].valueOf(), dates[1].valueOf()];
}

const useTable = (total: number): UseTableResult => {
  const [queryData, setQueryData] = useState<QueryData>({
    page: 1,
    size: 10
  });
  const handleSearch = (value: string) =>
    setQueryData({
      ...queryData,
      search: value && value.length > 0 ? value : undefined
    });

  const handleRangePicker = (dates: [Moment, Moment]) => {
    const formatDates = formatQueryDates(dates);
    setQueryData({
      ...queryData,
      beginTime: formatDates[0],
      endTime: formatDates[1]
    });
  };

  return {
    tableProps: {
      pagination: {
        total: total,
        showTotal: (total: number) => `共${total}条`,
        current: queryData?.page ?? 1,
        pageSize: queryData?.size ?? 10,
        showSizeChanger: true
      },
      onChange: (pagination: TablePaginationConfig) => {
        const { current, pageSize } = pagination;
        setQueryData({
          ...queryData,
          page: current,
          size: pageSize
        });
      }
    },
    queryData,
    handleSearch,
    handleRangePicker
  };
};

export default useTable;