import { useId, useState } from "react";
import { useTranslation } from "react-i18next";
import Icon from "./Icon";

/**
 * Passwortfeld mit Augensymbol zum Ein-/Ausblenden.
 *
 * Bewusst ein echtes ``type="password"``, solange nichts eingeblendet ist –
 * nur so funktionieren Passwortmanager und die Autofill-Erkennung des Browsers
 * zuverlässig.
 */
export default function PasswordInput({
  value,
  onChange,
  autoComplete = "current-password",
  required = false,
  autoFocus = false,
  id,
  ...rest
}) {
  const { t } = useTranslation();
  const [sichtbar, setSichtbar] = useState(false);
  const eigeneId = useId();
  const feldId = id || eigeneId;
  const beschriftung = sichtbar ? t("password.hide") : t("password.show");

  return (
    <div className="input-with-button">
      <input
        id={feldId}
        type={sichtbar ? "text" : "password"}
        autoComplete={autoComplete}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={required}
        // eslint-disable-next-line jsx-a11y/no-autofocus
        autoFocus={autoFocus}
        {...rest}
      />
      <button
        type="button"
        className="btn-icon"
        onClick={() => setSichtbar((v) => !v)}
        title={beschriftung}
        aria-label={beschriftung}
        aria-pressed={sichtbar}
        tabIndex={-1}
      >
        <Icon name={sichtbar ? "eye-off" : "eye"} size={17} />
      </button>
    </div>
  );
}