import React, { FC, useCallback, useState } from "react";
import DatePicker from "@components/DatePicker";
import { Table } from "../../../index";
import { historyTradeColumns } from "@components/OrderList/columnConfigs";
import { useFetch } from "@utils/request";
import { APINameEnum } from "@utils/request/ApiNameEnum";

export interface HistoryTradeProps {}
export const HistoryTrade: FC<HistoryTradeProps> = props => {
  const {} = props;
  const [[startTime, endTime], setTime] = useState<Array<number | null>>([]);
  const onDateStrChange = useCallback(([{ startV, endV }]: any) => setTime([startV, endV]), []);

  const { data: historyTradesSource, loading: historyTradesSourceLoading } = useFetch(APINameEnum.ORDERS_FILLS, {
    startTime,
    endTime
  });

  return (
    <>
      <div className={`flex items-center pl-[16px]`}>
        <DatePicker timeQuantum className={`my-[8px]`} onDateStrChange={onDateStrChange} initSinceWhen={"d"} />
      </div>
      <Table
        columns={historyTradeColumns}
        dataSource={historyTradesSource?.list}
        isLoading={historyTradesSourceLoading}
      />
    </>
  );
};