import { DirEnum, ESide } from "@utils/contractRules";
import { formatFloor, formatMoney } from "@utils/FormatNumber";
import React, { FC } from "react";
import { getPriceTypeLabel } from "@components/PositionDeliveryModal/config";

export interface SaranWrapProps {
  side: ESide;
  dir: DirEnum;
  costSizeScale: number;
  initPxs: any;
  setInitPxs: any;
}
const SaranWrap: FC<SaranWrapProps> = props => {
  const { side, dir, costSizeScale, initPxs, setInitPxs } = props;
  const isLong = side === ESide.LONG;
  const isUp = dir === DirEnum.UP;
  const conditionLabel = isUp ? "止盈" : "止损";
  const multiply = (isLong ? 1 : -1) * (isUp ? 1 : -1);
  const greaterOrLess = multiply > 0 ? "≥" : "≤";
  const condition = `${
    isUp ? getPriceTypeLabel(initPxs?.tpTriggerPxType) : getPriceTypeLabel(initPxs.slTriggerPxType)
  } ${greaterOrLess} ${formatMoney(
    formatFloor(isUp ? initPxs?.tpTriggerPx : initPxs?.slTriggerPx, costSizeScale)
  )} USDT`;
  const cancel = () =>
    isUp
      ? () => {
          setInitPxs?.({
            ...initPxs,
            tpTriggerPx: null
          });
        }
      : () => {
          setInitPxs?.({
            ...initPxs,
            slTriggerPx: null
          });
        };
  return (
    <>
      <div className={`font-medium text-derive-11`}>{conditionLabel}</div>
      <div className={`flex-1 text-right pr-[16px] font-bold text-black`}>{condition}</div>
      <div className={`text-blue font-medium cursor-pointer`} onClick={cancel()}>{`取消`}</div>
    </>
  );
};

export default SaranWrap;