import React, { FC, useEffect } from "react";
import { Table } from "../../../index";
import { openOrderColumns } from "@components/OrderList/columnConfigs";
import { useFetch } from "@utils/request";
import { TradeTypeEnum } from "@shared/types";
import { orderListTotalsSub } from "@components/OrderList";
import { APINameEnum } from "@utils/request/ApiNameEnum";

export interface OpenOrderProps {}
export const OpenOrder: FC<OpenOrderProps> = props => {
  const {} = props;
  const { data: openOrderSource, loading: openOrderSourceLoading } = useFetch(APINameEnum.OPEN_ORDERS, {
    tradeType: TradeTypeEnum.Linear
  });
  useEffect(() => {
    orderListTotalsSub.next({
      ...orderListTotalsSub.value,
      openOrder: openOrderSource?.totalSize
    });
  }, [openOrderSource]);

  return (
    <>
      <Table columns={openOrderColumns} dataSource={openOrderSource?.list} isLoading={openOrderSourceLoading} />
    </>
  );
};