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

export interface OrdersHistoryProps {}
export const OrdersHistory: FC<OrdersHistoryProps> = props => {
  const {} = props;
  const [orderType, setOrderType] = useState<OrderTypeEnum | "">("");
  const [[startTime, endTime], setTime] = useState<Array<number | null>>([]);
  const onDateStrChange = useCallback(([{ startV, endV }]: any) => setTime([startV, endV]), []);

  const { data: ordersHistorySource, loading: ordersHistorySourceLoading } = useFetch(APINameEnum.ORDERS_HISTORY, {
    orderType,
    startTime,
    endTime
  });

  return (
    <>
      <div className={`flex items-center pl-[16px]`}>
        <OrderTypeWidget type={orderType} onOrderTypeChange={setOrderType} />
        <DatePicker
          timeQuantum
          className={`my-[8px] ml-[30px]`}
          onDateStrChange={onDateStrChange}
          initSinceWhen={"d"}
        />
      </div>
      <Table
        columns={ordersHistoryColumns}
        dataSource={ordersHistorySource?.list}
        isLoading={ordersHistorySourceLoading}
      />
    </>
  );
};