import { useState } from "react";
import type { InputHTMLAttributes, MouseEvent, ReactElement } from "react";
import { IconEye, IconEyeClose } from "~assets/icons";

type InputHiddenProps = Partial<InputHTMLAttributes<HTMLInputElement>> & {
  suffix?: ReactElement
}

function InputHidden(props: InputHiddenProps) {
  const [type, setType] = useState<"text" | "password">("password");

  const onSwitchType = (ev: MouseEvent) => {
    ev.preventDefault();

    setType(type === "text" ? "password" : "text");
  }

  return (
    <div className="input-group">
      <input type={type} placeholder="隐藏信息" {...props} />
      {props.suffix && props.suffix}
      <button className="btn primary" onClick={onSwitchType} title={type === "text" ? "隐藏" : "显示"}>
        {type === "text" ? <IconEyeClose /> : <IconEye />}
      </button>
    </div>
  );
}

export default InputHidden;