// Adapted from Mantine PasswordInput (MIT). See THIRD_PARTY_NOTICES.md.
import {
  useId,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";

export interface PasswordInputProps extends Omit<
  ComponentProps<"input">,
  "type" | "onChange" | "className" | "style"
> {
  label: string;
  description?: string;
  error?: string;
  visible?: boolean;
  defaultVisible?: boolean;
  onVisibilityChange?: (visible: boolean) => void;
  onChange?: (value: string) => void;
  className?: string;
  style?: CSSProperties;
  inputClassName?: string;
  inputStyle?: CSSProperties;
}

export function PasswordInput({
  label,
  description,
  error,
  id,
  visible,
  defaultVisible = false,
  onVisibilityChange,
  onChange,
  className = "",
  style,
  inputClassName = "",
  inputStyle,
  disabled,
  "aria-describedby": describedBy,
  ...props
}: PasswordInputProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const [internalVisible, setInternalVisible] = useState(defaultVisible);
  const isVisible = visible ?? internalVisible;
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;

  const setVisible = (next: boolean) => {
    if (visible === undefined) setInternalVisible(next);
    onVisibilityChange?.(next);
  };

  return (
    <div className={`ynr-password-input ynr-field ${className}`} style={style}>
      <label htmlFor={inputId}>{label}</label>
      <div className="ynr-password-input-control">
        <input
          {...props}
          id={inputId}
          disabled={disabled}
          type={isVisible ? "text" : "password"}
          className={`ynr-password-input-field ${inputClassName}`}
          style={inputStyle}
          onChange={(event) => onChange?.(event.target.value)}
          aria-invalid={error ? true : props["aria-invalid"]}
          aria-describedby={
            [describedBy, hint ? hintId : undefined]
              .filter(Boolean)
              .join(" ") || undefined
          }
        />
        <button
          type="button"
          className="ynr-password-input-toggle"
          disabled={disabled}
          aria-label={isVisible ? "Hide password" : "Show password"}
          aria-pressed={isVisible}
          onClick={() => setVisible(!isVisible)}
        >
          {isVisible ? "Hide" : "Show"}
        </button>
      </div>
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}