import React, { FC, useCallback, useMemo, useState } from "react";
import { MoreIcon } from "@icons/More";
import { IconCom } from "@icons/index";
import { Select } from "@atomintl/aui-next";
import { PreferenceConfirmType } from "@components/PreferenceConfirm";

const { Option } = Select;

export interface PreferenceMoreProps {
  onShowPreferenceModal?: (bool: boolean, type: PreferenceConfirmType) => void;
  preferenceType?: PreferenceConfirmType;
  isLogin?: boolean;
}

export const PreferenceMore: FC<PreferenceMoreProps> = props => {
  const { onShowPreferenceModal, preferenceType, isLogin } = props;
  const [active, setActive] = useState(false);

  const handleClick = useCallback(() => {
    setActive(true);
  }, []);

  const handleClose = useCallback((val: boolean) => {
    setActive(val);
  }, []);

  const onChange = (val: PreferenceConfirmType) => {
    if (val) {
      onShowPreferenceModal?.(true, val);
    }
  };

  const disable = useMemo(() => !isLogin, [isLogin]);
  return (
    <Select
      placement="right"
      optionWidth={116}
      open={active}
      disabled={disable}
      value={preferenceType ?? ""}
      customizeSelect={
        <IconCom onClick={handleClick} className={disable ? "notAllowedCursor" : ""}>
          <MoreIcon className={`ml-[16px] `} />
        </IconCom>
      }
      className={`text-[14px] `}
      onChange={onChange}
      onOpenChange={handleClose}
    >
      <Option value={PreferenceConfirmType.PositionMode}>仓位模式</Option>
      <Option value={PreferenceConfirmType.OrderConfirm}>下单确认</Option>
    </Select>
  );
};
PreferenceMore.defaultProps = {};