/**
 * 价格的结尾dom
 */

import React, { FC, useCallback } from "react";
import CustomToolTip from "@components/PlaceOrder/CustomToolTip";
import clsx from "clsx";
import { LimitMarketSelect } from "./LimitMarketSelect";
import { OrderTypeEnum } from "@shared/types";
interface SuffixPriceProps {
  /** 是否条件单 */
  condition?: boolean;
  showNew?: boolean;
  /** 点击最新 */
  onClickNewPrice?: () => void;
  unit?: string;
  triggerValue?: OrderTypeEnum;
  onTriggerTypeChange?: (val: OrderTypeEnum) => void;
}

export const SuffixPrice: FC<SuffixPriceProps> = props => {
  const { condition, unit, showNew, onClickNewPrice } = props;

  const onNewPrice = useCallback(
    (event?: React.MouseEvent<HTMLDivElement>) => {
      event?.stopPropagation();
      props.onClickNewPrice?.();
    },
    [onClickNewPrice]
  );
  return (
    <div className={clsx("nts-place-order-suffix-price ", " text-[14px] text-gray-16 flex items-center font-normal ")}>
      {showNew ? (
        <CustomToolTip arrow placement="top" title="以当前最新价格填入">
          <div className="cursor-pointer text-blue mr-[8px] text-[14px]" onClick={onNewPrice}>
            最新
          </div>
        </CustomToolTip>
      ) : (
        ""
      )}
      {condition ? (
        <LimitMarketSelect value={props.triggerValue} onTriggerTypeChange={props.onTriggerTypeChange} />
      ) : (
        <span className="pr-[12px]">{unit}</span>
      )}
    </div>
  );
};

SuffixPrice.defaultProps = {
  condition: false,
  showNew: false,
  onClickNewPrice: () => {},
  unit: ""
};