/*
    Предрейсовые осмотры - мобильное приложение
    Компонент ввода пароля с возможностью показать/скрыть
*/

//---------------------
//Подключение библиотек
//---------------------

const React = require('react'); //React
const { View, TextInput, Pressable } = require('react-native'); //Разметка и поле ввода
const AppText = require('./AppText'); //Общий текст
const styles = require('../../styles/common/PasswordInput.styles'); //Стили поля пароля

//-----------
//Тело модуля
//-----------

//Компонент ввода пароля
const PasswordInput = React.forwardRef(function PasswordInput(
    {
        label,
        value,
        onChangeText,
        placeholder,
        showPassword = false,
        onTogglePassword,
        error,
        helperText,
        disabled = false,
        style,
        inputStyle,
        labelStyle,
        onFocus: onFocusProp,
        onBlur: onBlurProp,
        ...restProps
    },
    ref
) {
    const [isFocused, setIsFocused] = React.useState(false);

    const inputRef = React.useRef(null);
    const setRef = React.useCallback(
        node => {
            inputRef.current = node;
            if (typeof ref === 'function') {
                ref(node);
            } else if (ref) {
                ref.current = node;
            }
        },
        [ref]
    );

    //Обработчик фокуса (внутренний + опциональный внешний)
    const handleFocus = React.useCallback(
        e => {
            setIsFocused(true);
            if (typeof onFocusProp === 'function') onFocusProp(e);
        },
        [onFocusProp]
    );

    //Обработчик потери фокуса (внутренний + опциональный внешний)
    const handleBlur = React.useCallback(
        e => {
            setIsFocused(false);
            if (typeof onBlurProp === 'function') onBlurProp(e);
        },
        [onBlurProp]
    );

    //Обработчик переключения видимости пароля
    const handleTogglePassword = React.useCallback(() => {
        if (typeof onTogglePassword === 'function') {
            onTogglePassword(!showPassword);
        }
    }, [onTogglePassword, showPassword]);

    //Обработчик нажатия на контейнер для фокуса на поле ввода
    const handleContainerPress = React.useCallback(() => {
        if (!disabled && inputRef.current) {
            inputRef.current.focus();
        }
    }, [disabled]);

    return (
        <View style={[styles.container, style]}>
            {label ? (
                <AppText style={[styles.label, labelStyle]} variant="caption" weight="medium">
                    {label}
                </AppText>
            ) : null}

            <Pressable
                style={[
                    styles.inputContainer,
                    isFocused && styles.inputContainerFocused,
                    error && styles.inputContainerError,
                    disabled && styles.inputContainerDisabled
                ]}
                onPress={handleContainerPress}
                disabled={disabled}
            >
                <TextInput
                    ref={setRef}
                    style={[styles.input, disabled && styles.inputDisabled, inputStyle]}
                    value={value}
                    onChangeText={onChangeText}
                    placeholder={placeholder}
                    placeholderTextColor={styles.placeholder.color}
                    secureTextEntry={!showPassword}
                    keyboardType="default"
                    autoCapitalize="none"
                    autoCorrect={false}
                    autoFocus={false}
                    editable={!disabled}
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                    accessible={true}
                    accessibilityLabel={label || placeholder}
                    accessibilityRole="text"
                    {...restProps}
                />

                <Pressable style={styles.toggleButton} onPress={handleTogglePassword} disabled={disabled}>
                    <AppText style={[styles.toggleButtonText, disabled && styles.toggleButtonTextDisabled]}>
                        {showPassword ? 'Скрыть' : 'Показать'}
                    </AppText>
                </Pressable>
            </Pressable>

            {error || helperText ? (
                <AppText style={[styles.helperText, error && styles.helperTextError]} variant="caption">
                    {error || helperText}
                </AppText>
            ) : null}
        </View>
    );
});

//----------------
//Интерфейс модуля
//----------------

module.exports = PasswordInput;
