import { useLingui } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default, { useState, useRef, useEffect } from 'react';
import Button from '../atoms/Button.mjs';
import Input from './Input.mjs';

const PasswordInput = ({ password, setPassword, type, ...additionalProps })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    const [visible, setVisible] = useState(false);
    // https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/
    // Recommends setting the type back to password on submit
    const inputRef = useRef(null);
    useEffect(()=>{
        const form = inputRef.current?.form;
        if (!form) return;
        const controller = new AbortController();
        form.addEventListener('submit', ()=>{
            // Don't know if this is fast enough, so we also update the DOM directly
            if (inputRef.current) inputRef.current.type = 'password';
            setVisible(false);
        }, {
            signal: controller.signal
        });
        return ()=>controller.abort();
    }, []);
    return /*#__PURE__*/ React__default.createElement(Input, {
        id: `${type}-password`,
        label: $__i18n._({
            id: "formField.password.label",
            message: "Password"
        }),
        ref: inputRef,
        autoComplete: `${type}-password`,
        type: visible ? 'text' : 'password',
        value: password,
        onChange: (e)=>setPassword(e.target.value),
        required: true,
        action: /*#__PURE__*/ React__default.createElement(Button, {
            variant: "ghost",
            onClick: ()=>setVisible(!visible)
        }, visible ? $__i18n._({
            id: "button.hidePassword",
            message: "Hide"
        }) : $__i18n._({
            id: "button.showPassword",
            message: "Show"
        })),
        ...additionalProps
    });
};

export { PasswordInput };
//# sourceMappingURL=PasswordInput.mjs.map
