/**
 * @description 头部组件;个人偏好功能和调整保证金功能
 *
 * @date 创建时间 2022-11-02 11:28
 * @author 开发人员 yena.he
 */

import React, { FC, useCallback, useEffect, useState, useRef } from "react";
import { PlaceOrderHeader } from "@components/PlaceOrder/Head";
import { MarginTypeEnum } from "@shared/types";
import {
  AdjustingLeverModal,
  AdjustingLeverModalRefFuncProps,
  AdjustingLeverModalConfirmProps
} from "@components/AdjustingLeverModal";
import PreferenceConfirm, { PreferenceConfirmType } from "@components/PreferenceConfirm";
import { PlaceOrderService, PairsService } from "../../services";
import { useObservable } from "rxjs-hooks";
import { map } from "rxjs/operators";
import { IFormatCurrentPair } from "@shared/types/interface";
import { useLazyFetch, APINameEnum } from "@utils/request";

interface Props {
  marginType: MarginTypeEnum;
  leverage: number;
}
const Header: FC<Props> = props => {
  const { marginType, leverage } = props;
  const [openLeverageModal, setOpenLeverageModal] = useState(false);

  const [openPreferenceModal, setOpenPreferenceModal] = useState<{
    type?: PreferenceConfirmType;
    open: boolean;
  }>({
    open: false
  });

  const adjustingLeverModalRef = useRef<AdjustingLeverModalRefFuncProps>();

  const preferenceDate = useObservable(() => PlaceOrderService.instance.preference$.pipe(map(val => val)));

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

  // 获取用户当前交易对/仓位模式的杠杆
  const [queryLeverageInfo, { data: leverageInfo }] = useLazyFetch(APINameEnum.LEVERAGE_INFO);

  useEffect(() => {
    if (currentPair?.tradeType && currentPair?.symbol && marginType) {
      console.log(currentPair?.tradeType, marginType, currentPair?.symbol, "杠杆查询");
      queryLeverageInfo({
        tradeType: currentPair.tradeType,
        symbol: currentPair.symbol,
        marginType
      });
    }
  }, [currentPair?.symbol, currentPair?.tradeType, marginType]);

  useEffect(() => {
    if (leverageInfo && leverageInfo?.length) {
      // 写入杠杆
      PlaceOrderService.instance.updateLeverage(leverage);
    }
  }, [leverageInfo]);

  const changePreferenceModal = useCallback((open: boolean, type?: PreferenceConfirmType) => {
    setOpenPreferenceModal({
      type,
      open
    });
  }, []);

  const handleOrderConfirmChange = (checked: boolean) => {
    PlaceOrderService.instance.updatePreference(checked);
  };

  const openAdjustingLeverModal = () => {
    setOpenLeverageModal(true);
    adjustingLeverModalRef.current?.onValueUpdate(leverage);
  };

  const onCloseAdjustingLever = useCallback(() => setOpenLeverageModal(false), []);

  const onConfirm = (o: AdjustingLeverModalConfirmProps) => {
    setOpenLeverageModal(false);
  };

  return (
    <>
      <PlaceOrderHeader
        leverage={leverage}
        marginType={marginType}
        onShowLeverageModal={openAdjustingLeverModal}
        onShowPreferenceModal={changePreferenceModal}
        preferenceType={openPreferenceModal.type as PreferenceConfirmType}
        isLogin={true}
      />
      <PreferenceConfirm
        open={openPreferenceModal.open}
        onClose={() => changePreferenceModal(false)}
        defaultTab={openPreferenceModal.type as PreferenceConfirmType}
        onOrderConfirmChange={handleOrderConfirmChange}
        previewList={preferenceDate}
      />
      <AdjustingLeverModal
        open={openLeverageModal}
        defaultLever={leverage}
        initMarginType={marginType}
        onClose={onCloseAdjustingLever}
        onConfirm={onConfirm}
        tradeType={currentPair.tradeType}
        symbol={currentPair?.symbol}
      />
    </>
  );
};

Header.defaultProps = {};
export default Header;