/**
 * @description 数字输入框和slider滑动条绑定
 *
 * @date 创建时间 2022-10-27 15:33
 * @author 开发人员 yena
 */

import React, { forwardRef, ForwardedRef } from "react";
import { PlaceOrderInput } from "../PlaceOrderInput";
import { OrderTypeEnum } from "@shared/types";
import { SuffixPrice } from "./SuffixPrice";
export interface PriceInputProps {
  scale?: number;
  step?: number;
  error?: boolean;
  value?: any;
  orderType: OrderTypeEnum;
  quote: string;
  lastPrice?: string;
  name?: any;
  onChangePriceInput: (val: string, focus: any) => void;
  triggerTypeChange: (type: OrderTypeEnum) => void;
  optimumLevel?: number | string;
}

export const PriceInput = forwardRef((props: PriceInputProps, ref: ForwardedRef<HTMLInputElement>) => {
  const { orderType, lastPrice, quote, optimumLevel = 5 } = props;

  const onChangePriceInput = (val: string, focus?: boolean) => {
    props.onChangePriceInput?.(val, focus);
  };

  return orderType === OrderTypeEnum.Market ? (
    <></>
  ) : (
    <PlaceOrderInput
      inputRef={ref}
      placeholder="价格"
      className="mb-[12px]"
      onChange={onChangePriceInput}
      value={props.value}
      name={props.name}
      disabled={orderType === OrderTypeEnum.TriggerMarket}
      endAdornment={
        <SuffixPrice
          showNew={orderType !== OrderTypeEnum.TriggerMarket}
          unit={quote}
          onClickNewPrice={() => onChangePriceInput?.(lastPrice ?? "", true)}
          condition={orderType === OrderTypeEnum.TriggerLimit || orderType === OrderTypeEnum.TriggerMarket}
          triggerValue={orderType}
          onTriggerTypeChange={props.triggerTypeChange}
        />
      }
      centerAdornment={
        <div className="absolute top-[50%] right-[8px]  translate-y-[-50%] text-[14px] font-medium">
          {orderType === OrderTypeEnum.TriggerMarket ? `最优${optimumLevel}档` : ""}
        </div>
      }
      limitInputStep={true}
      scale={props.scale}
      step={props.step}
      error={props.error}
    />
  );
});