import React, { FC, useCallback, useMemo, useState } from "react";
import OrderPreferenceConfirm from "@components/OrderPreferenceConfirm";
import { SelectButton } from "@components/PlaceOrder/PlaceSelect/SelectButton";
import { TradeUnitEnum } from "@shared/types";
import clsx from "clsx";
export interface SuffixQuantityProps {
  base: string;
  settleCurrency: string;
  baseOn: boolean;
  onChangeBaseQuantity: (bool: boolean) => void;
  /** 仅仅使用base， 不支持value/cost切换 */
  disableCost?: boolean;
  /** 禁止下拉手势 */
  disable?: boolean;
}

export const SuffixQuantity: FC<SuffixQuantityProps> = props => {
  const { settleCurrency = "", onChangeBaseQuantity, base = "", baseOn, disableCost } = props;
  const [open, setOpen] = useState(false);

  const onClose = useCallback(() => {
    setOpen(false);
  }, []);
  const onOk = useCallback(
    (value?: string | number) => {
      setOpen(false);

      onChangeBaseQuantity?.(value === 1);
    },
    [onChangeBaseQuantity, base]
  );
  const _value = useMemo(() => {
    return baseOn ? base : settleCurrency;
  }, [base, settleCurrency, baseOn]);

  const dropCursor = useMemo(() => {
    return !_value || props.disable;
  }, [_value, props.disable]);
  return (
    <div className=" cursor-pointer text-gray-16 text-[14px]">
      {disableCost ? (
        <span className="mr-[12px]">{base}</span>
      ) : (
        <SelectButton
          open={open}
          disable={dropCursor}
          setOpen={() => setOpen(true)}
          className="flex items-center text-[14px] font-normal pr-[12px]"
        >
          {_value}
        </SelectButton>
      )}

      <OrderPreferenceConfirm
        open={open}
        value={_value === base ? TradeUnitEnum.Quantity : TradeUnitEnum.Cost}
        options={[
          {
            desc: `请您填写合约数量，单位为 ${base}`,
            disabled: false,
            title: `按数量下单 ${base}`,
            value: 1
          },
          {
            desc: `按开仓会占用多少数量的 ${settleCurrency}保证金进行下单。更改杠杆会导致已存在挂单所需保证金的变动。`,
            disabled: false,
            title: `按成本下单 ${settleCurrency}`,
            value: 2
          }
        ]}
        onClose={onClose}
        onCancel={onClose}
        onOk={onOk}
      />
    </div>
  );
};