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

import React, { forwardRef, ForwardedRef } from "react";
import { PlaceOrderInput } from "./index";
import { SuffixQuantity, SuffixQuantityProps } from "./SuffixQuantity";
import { CenterQuantity } from "./SuffixQuantity/CenterQuantity";

export interface QuantityInputProps extends SuffixQuantityProps {
  scale?: number;
  error?: boolean;
  showCenter: boolean;
  value?: any;
  sideQuantity: {
    buy: string;
    sell: string;
  };
  onChangeQuantityInput: (val: string) => void;
  handleClearQuantityInput: (bool?: boolean) => void;
  name?: any;
  isLogin: boolean;
}

export const QuantityInput = forwardRef((props: QuantityInputProps, ref: ForwardedRef<HTMLInputElement>) => {
  const { baseOn, scale, sideQuantity } = props;

  return (
    <PlaceOrderInput
      inputRef={ref}
      placeholder={baseOn ? "数量" : "成本"}
      onChange={props.onChangeQuantityInput}
      value={props.value}
      className="mb-[12px]"
      name={props.name}
      endAdornment={
        <SuffixQuantity
          base={props.base}
          settleCurrency={props.settleCurrency}
          baseOn={baseOn}
          disableCost={props.disableCost}
          disable={!props.isLogin}
          onChangeBaseQuantity={props.onChangeBaseQuantity}
        />
      }
      proOnFocus={() => props.showCenter && props.handleClearQuantityInput(true)}
      centerAdornment={
        props.showCenter ? (
          <div
            className={
              "absolute w-full h-full flex items-center justify-end  pr-[8px] text-gray-16 font-bold text-[14px] cursor-pointer"
            }
            onClick={() => props.handleClearQuantityInput(true)}
          >
            <CenterQuantity buyText={sideQuantity.buy} sellText={sideQuantity.sell} />
          </div>
        ) : (
          <span></span>
        )
      }
      scale={scale}
      error={props.error}
    />
  );
});