import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useState, } from "react";
import { useOneUIConfig } from "../../context/OneUIProvider";
import Input from "../Input";
import Text from "../Text";
import Styles from "./PasswordInput.module.scss";
const BASE_VALIDATION = [
    { code: "size", validate: (pass) => pass.length >= 8 },
];
const RULES = [
    {
        code: "duplication",
        validate: (pass) => {
            for (let i = 0; i < pass.length; i++) {
                const charCode = pass.charCodeAt(i);
                const [firstNext, secondNext] = [
                    pass.charCodeAt(i + 1) || 0,
                    pass.charCodeAt(i + 2) || 0,
                ];
                if (firstNext - charCode === 1 && secondNext - firstNext === 1) {
                    return false;
                }
            }
            return true;
        },
    },
    ...BASE_VALIDATION,
];
function _PasswordInput(props, ref) {
    const [isPasswordVisibile, setIPV] = useState(false);
    const { passwordHidden, passwordVisible } = useOneUIConfig("component.passwordInput.iconSrc");
    function _validatePassword(password) {
        switch (props.mode) {
            case "creation":
                return RULES.reduce((isValid, R) => isValid && R.validate(password), true);
            case "comparision":
                return password === props.otherPassword;
            case "input":
                return BASE_VALIDATION.reduce((isValid, R) => isValid && R.validate(password), true);
        }
    }
    useImperativeHandle(ref, () => ({
        validatePassword: (pass) => _validatePassword(pass),
    }));
    function _onChange(e) {
        const password = e.target.value;
        switch (props.mode) {
            case "comparision":
            case "creation":
                props.onChange(password, _validatePassword(password));
                break;
            case "input":
                props.onChange(password);
                break;
        }
    }
    return (_jsxs("div", { className: `${Styles.inputContainer} ${Styles[props.mode]} ${Styles.icon}`, children: [_jsx(Input, { value: props.value, onChange: _onChange, type: !isPasswordVisibile ? "password" : "", icon: {
                    src: isPasswordVisibile ? passwordHidden : passwordVisible,
                    onMouseLeave: () => setIPV(false),
                    onMouseDown: () => setIPV(true),
                    onMouseUp: () => setIPV(false),
                    onTouchMove: () => setIPV(false),
                    onTouchStart: () => setIPV(true),
                    onTouchEnd: () => setIPV(false),
                }, error: props.mode === "comparision" && !_validatePassword(props.value)
                    ? props.messages.passwordsAreDifferent
                    : props.error, disabled: props.disabled, placeholder: props.placeholder }), props.mode === "creation" && (_jsxs("div", { className: Styles.rules, "data-testid": "password-rules", children: [_jsx(Text, { type: "caption", children: props.messages.rulesTitle }), RULES.map((R) => (_jsxs(Text, { type: R.validate(props.value) ? "caption" : "error", children: ["- ", props.messages.invalidRules[R.code]] }, R.code)))] }))] }));
}
/**
 * A password input component that shows and hides the password text
 * and provides validation for password strength or matching.
 */
const PasswordInput = forwardRef(_PasswordInput);
export default PasswordInput;
//# sourceMappingURL=PasswordInput.js.map