import { IconEyeClosed, IconEyeOpened } from '@douyinfe/semi-icons';
import { Button, Input } from '@douyinfe/semi-ui';
import { type ComponentProps, useState } from 'react';

type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'mode' | 'suffix' | 'type'> & {
  visibilityLabel?: string;
};

export function PasswordInput({ visibilityLabel = '密码', ...props }: PasswordInputProps) {
  const [visible, setVisible] = useState(false);
  const actionLabel = `${visible ? '隐藏' : '显示'}${visibilityLabel}`;
  return <Input
    {...props}
    type={visible ? 'text' : 'password'}
    suffix={<Button
      className="v2-password-visibility"
      theme="borderless"
      type="tertiary"
      htmlType="button"
      icon={visible ? <IconEyeOpened /> : <IconEyeClosed />}
      aria-label={actionLabel}
      aria-pressed={visible}
      title={actionLabel}
      onMouseDown={(event) => event.preventDefault()}
      onClick={() => setVisible((value) => !value)}
    />}
  />;
}
