/**
 * @description 下单面板
 *
 * @date 创建时间 2022-11-02 15:24
 * @author 开发人员
 */

import React, { useState, useRef, useEffect, useMemo } from "react";
import { OrderTypeEnum, TradeUnitEnum, MarginTypeEnum } from "@shared/types";

import {
  FuturesForm,
  FuturesFormProps,
  IPlaceOrderParams,
  IPlaceNormalOrderParams,
  IPlaceStopOrderParams
} from "@components/PlaceOrder/FuturesForm";
import OrderConfirm, { OrderDetails } from "@components/OrderConfirm";
import { PlaceOrderService, PairsService, BalancesService, BalanceItemProps } from "../../services";
import { useObservable } from "rxjs-hooks";
import { map } from "rxjs/operators";
import { IFormatCurrentPair } from "@shared/types/interface";
import { find } from "ramda";
interface Props {
  leverage: number;
  marginType: MarginTypeEnum;
}

const OrderForm: React.FC<Props> = props => {
  const { leverage, marginType } = props;
  const [openOrderConfirmModal, setOpenOrderConfirmModal] = useState(false);

  const [OrderConfirmText, setOrderConfirmText] = useState<OrderDetails | undefined>(undefined);
  const placeParams = useRef<IPlaceStopOrderParams | null>(null);

  const preferenceDate = useObservable(() => PlaceOrderService.instance.preference$.pipe(map(val => val)));
  const tradeUnit = useObservable(() => PlaceOrderService.instance.tradeUnit$.pipe(map(val => val)));
  const currentPair =
    useObservable(() => PairsService.instance.currentPairs$.pipe(map(val => val))) ?? ({} as IFormatCurrentPair);

  const balances =
    useObservable(() => BalancesService.instance.balances$.pipe(map(val => val))) ?? ([] as BalanceItemProps[]);

  const avbBalance = useMemo(() => {
    return find(item => item.currency === currentPair.settleCurrency, balances)?.marginAvailable ?? "0";
  }, [currentPair?.settleCurrency, balances]);

  const handlePlaceOrder = (params: IPlaceOrderParams) => {
    /**
     * 订单提交
     * 1. 查询是否需要二次确认，需要则要提交api看预计强平价格
     * 2. 提交
     */
    const { orderType } = params;

    const needSecond = preferenceDate;
    console.log(params, "参数");
    placeParams.current = { ...params };
    if (needSecond) {
      // 查预计强平价格
      setOrderConfirmText({
        marginType,
        orderType,
        leverage,
        isClose: params.isClose
      });
      return setOpenOrderConfirmModal(true);
    }
    // 下单
    return postOrders();
  };
  const postOrders = () => {
    if (placeParams.current && typeof placeParams.current === "object") {
      const { triggerPxType, ordPx, ...params } = placeParams.current;
      if (triggerPxType) {
        // 条件单
        return;
      }
      // 普通订单
    }
  };

  const handleConfirmOrders = (checked: boolean) => {
    // 提交订单
  };

  const handleBaseOnChange = (bool: boolean) => {
    PlaceOrderService.instance.updateTradeUnit(bool ? TradeUnitEnum.Quantity : TradeUnitEnum.Cost);
  };

  return (
    <>
      <FuturesForm
        openBaseQty={tradeUnit === TradeUnitEnum.Quantity}
        handlePlaceOrder={handlePlaceOrder}
        handleBaseOnChange={handleBaseOnChange}
        currentPair={currentPair}
        avbBalance={avbBalance}
        isLogin={true}
        leverage={props.leverage}
      />
      <OrderConfirm open={openOrderConfirmModal} onConfirm={handleConfirmOrders} orderDetails={OrderConfirmText} />
    </>
  );
};

export default OrderForm;