import { Eye, EyeSlash } from "@phosphor-icons/react";
import { useState } from "react";
import { TextField, type TextFieldProps } from "../text-field";

export type PasswordInputProps = Omit<TextFieldProps, "type" | "suffixIcon"> & {
  hidePasswordLabel?: string;
  showPasswordLabel?: string;
  showToggle?: boolean;
};

export function PasswordInput({
  hidePasswordLabel = "Hide password",
  showPasswordLabel = "Show password",
  showToggle = true,
  ...props
}: PasswordInputProps) {
  const [visible, setVisible] = useState(false);

  const visibilityButton = showToggle ? (
    <div
      aria-label={visible ? hidePasswordLabel : showPasswordLabel}
      className="grid place-items-center rounded-[var(--uhuru-radius-sm)] text-[var(--uhuru-text-tertiary)] hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]"
      onClick={() => setVisible((current) => !current)}
      title={visible ? hidePasswordLabel : showPasswordLabel}
    >
      {visible ? (
        <EyeSlash aria-hidden="true" size={18} />
      ) : (
        <Eye aria-hidden="true" size={18} />
      )}
    </div>
  ) : null;
  return (
    <TextField
      {...props}
      suffixIcon={visibilityButton}
      suffixInteractive={showToggle}
      type={visible ? "text" : "password"}
    />
  );
}