import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { useHidePersonalData } from '../personalDataSecurity';
import { Skeleton } from '../Skeleton';
import { ERROR_TEXT_DEFAULT, RESEND_TIMEOUT_DEFAULT } from './constants';
import { useCodeState, useFocusInput } from './hooks';
import { ResendCodeButton } from './ResendCodeButton';
import { Digit, DigitsItem, DigitsWrapper, FieldLabel, StyledHelperText, Wrapper, } from './styles';
/**
 * Поле для ввода кода подтверждения
 */
export const CodeField = forwardRef(({ label, resendTimeout = RESEND_TIMEOUT_DEFAULT, codeLength, isAllowResendCode = false, onResendCode, initialValue, loading = false, disabled = false, isError = false, errorText = ERROR_TEXT_DEFAULT, onChange: onFieldChange, onComplete, isAutoFocus = false, isHidePersonalData, }, ref) => {
    const { inputRefs, setFocusIndexNext, setFocusIndexPrevious, setBlur } = useFocusInput(codeLength, isAutoFocus);
    const { codeValue, onKeyDown, onKeyUp, onChange, onPaste, clearCodeValue } = useCodeState(initialValue, codeLength, setFocusIndexNext, setFocusIndexPrevious, setBlur, onFieldChange, onComplete);
    const setRef = (index) => (el) => {
        if (el) {
            inputRefs.current[index] = el;
        }
    };
    const hidePersonalDataClassname = useHidePersonalData({
        isEnabled: isHidePersonalData,
        type: 'input',
    });
    return (_jsxs(Wrapper, { ref: ref, children: [label && _jsx(FieldLabel, { children: label }), _jsx(DigitsWrapper, { children: codeValue.map((value, index) => (
                // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
                _jsx(DigitsItem, { children: loading ? (_jsx(Skeleton, { variant: "rounded", height: 60, children: _jsx(Digit, { disabled: true }) })) : (_jsx(Digit, { className: hidePersonalDataClassname, "$isError": isError, type: "text", inputMode: "numeric", pattern: "[0-9]", disabled: disabled, value: value ?? '', ref: setRef(index), onKeyUp: (e) => onKeyUp(e, index), onKeyDown: (e) => onKeyDown(e, index), onChange: (e) => onChange(e, index), onPaste: (e) => !disabled && onPaste(e) })) }, index))) }), isError && _jsx(StyledHelperText, { error: true, children: errorText }), isAllowResendCode && (_jsx(ResendCodeButton, { resendTimeout: resendTimeout, disabled: disabled, loading: loading, onResendCode: onResendCode, clearCodeValue: clearCodeValue }))] }));
});
