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

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

  const { data: positionClosedSource, loading: positionClosedSourceLoading } = useFetch(APINameEnum.POSITION_CLOSED, {
    startTime,
    endTime
  });

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