/**
 * @description 合约服务
 *
 * @date 创建时间 2022/10/24 15:08
 * @author yena.he
 */

import React, { FC, useEffect } from "react";
import PlaceOrders from "./PlaceOrders";
import Tickers from "./Tickers";
import { PairsService } from "./services";
import OrderList from "@components/OrderList";
import LayoutMap from "@components/LayoutMap";
import { TradeTypeEnum } from "@shared/types";
import type { InstrumentProps } from "@shared/types/interface";
import { useFetch, APINameEnum } from "@utils/request";
import "./index.css";

export interface ProjectFuturesProps {
  tradeType?: TradeTypeEnum;
}

const ProjectFutures: FC<ProjectFuturesProps> = props => {
  const { tradeType = TradeTypeEnum.Linear } = props;
  PairsService.instance.tradeType$.next(tradeType);

  const { data, loading } = useFetch<{ tradeType: TradeTypeEnum }, InstrumentProps[]>(APINameEnum.INSTRUMENTS, {
    tradeType
  });

  useEffect(() => {
    // 写入本地缓存的交易对
    PairsService.instance.getLocalPairs();
    document.documentElement.setAttribute("data-theme", "light");
  }, []);

  useEffect(() => {
    // 根据api返回更新交易对

    if (!loading) {
      PairsService.instance.init(data ?? []);
      PairsService.instance.hadConfig$.next(true);
    }
  }, [loading, data]);

  return (
    <div className="futures-root bg-gray-1 upGreen">
      <div className="futures-header h-[64px] w-[100%] bg-blue-5">头部</div>
      <div className="futures-body flex">
        <div className="flex-1">
          <LayoutMap
            views={{
              T: (
                <div className={`bg-gray-100 h-full`}>
                  <Tickers />
                </div>
              ),
              V: <div className={`bg-gray-200 h-full`}>TradingView</div>,
              E: <div className={`bg-gray-300 h-full`}>Entrust List</div>,
              L: <div className={`bg-gray-400 h-full`}>Latest Records</div>,
              // O: <div className={`bg-gray-400 h-full`}>Latest Records</div>
              O: <OrderList />
            }}
          />
        </div>
        <PlaceOrders />
      </div>
    </div>
  );
};

export default ProjectFutures;