import React, { FC, memo, useContext, useEffect, useState } from "react";
import { Table } from "../../../index";
import { positionColumns } from "@components/OrderList/columnConfigs";
import { useFetch } from "@utils/request";
import { APINameEnum } from "@utils/request/ApiNameEnum";
import { OrderListCTX, orderListTotalsSub } from "@components/OrderList";
// import { OrderListCTX, orderListTotalsSub } from "@components/OrderList";

export interface PositionProps {
  pairs: any[];
}
export const Position: FC<PositionProps> = memo(props => {
  const {} = props;
  const pairs = useContext(OrderListCTX);
  const { data: positionDataSource, loading: positionDataSourceLoading } = useFetch(APINameEnum.POSITION, {
    tradeType: "linearPerpetual"
  });
  const [packedPositionDataSource, setPackedPositionDataSource] = useState<any[]>([]);
  useEffect(() => {
    orderListTotalsSub.next({
      ...orderListTotalsSub.value,
      position: positionDataSource?.length
    });
    const packedPositionDataSource = positionDataSource?.map((_it: any) => {
      const pair = pairs.filter(_d => _d.symbol === _it.symbol)?.[0];
      return {
        ..._it,
        pair
      };
    });
    setPackedPositionDataSource(packedPositionDataSource);
  }, [positionDataSource]);

  return (
    <>
      <Table columns={positionColumns} dataSource={packedPositionDataSource} isLoading={positionDataSourceLoading} />
    </>
  );
});