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

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

const React = require('react'); //React
const { Modal, View, TextInput, Pressable } = require('react-native'); //Базовые компоненты
const AppText = require('./AppText'); //Общий текстовый компонент
const AppButton = require('./AppButton'); //Кнопка
const styles = require('../../styles/common/InputDialog.styles'); //Стили диалога

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

//Модальное окно с полем ввода
function InputDialog({
    visible,
    title = 'Ввод данных',
    label,
    value = '',
    placeholder,
    keyboardType = 'default',
    autoCapitalize = 'none',
    confirmText = 'Сохранить',
    cancelText = 'Отмена',
    onConfirm,
    onCancel,
    validator,
    errorMessage
}) {
    //Локальное значение для редактирования
    const [inputValue, setInputValue] = React.useState(value);
    const [error, setError] = React.useState('');
    const [isFocused, setIsFocused] = React.useState(false);

    //Сброс значения при открытии диалога
    React.useEffect(() => {
        if (visible) {
            setInputValue(value);
            setError('');
        }
    }, [visible, value]);

    //Обработчик фокуса
    const handleFocus = React.useCallback(() => {
        setIsFocused(true);
    }, []);

    //Обработчик потери фокуса
    const handleBlur = React.useCallback(() => {
        setIsFocused(false);
    }, []);

    //Обработчик изменения текста
    const handleChangeText = React.useCallback(text => {
        setInputValue(text);
        setError('');
    }, []);

    //Валидация введённого значения
    const validateInput = React.useCallback(() => {
        if (typeof validator === 'function') {
            const validationResult = validator(inputValue);
            if (validationResult !== true) {
                setError(validationResult || errorMessage || 'Некорректное значение');
                return false;
            }
        }
        return true;
    }, [inputValue, validator, errorMessage]);

    //Обработчик подтверждения
    const handleConfirm = React.useCallback(() => {
        if (!validateInput()) {
            return;
        }

        if (typeof onConfirm === 'function') {
            onConfirm(inputValue.trim());
        }
    }, [inputValue, validateInput, onConfirm]);

    //Обработчик отмены
    const handleCancel = React.useCallback(() => {
        if (typeof onCancel === 'function') {
            onCancel();
        }
    }, [onCancel]);

    //Обработчик закрытия по кнопке "Назад" (Android)
    const handleRequestClose = React.useCallback(() => {
        handleCancel();
    }, [handleCancel]);

    return (
        <Modal visible={visible} transparent={true} animationType="fade" statusBarTranslucent={true} onRequestClose={handleRequestClose}>
            <View style={styles.backdrop}>
                <View style={styles.container}>
                    <View style={styles.header}>
                        <AppText style={styles.title}>{title}</AppText>
                        <Pressable accessibilityRole="button" accessibilityLabel="Закрыть" onPress={handleCancel} style={styles.closeButton}>
                            <AppText style={styles.closeButtonText}>×</AppText>
                        </Pressable>
                    </View>

                    <View style={styles.content}>
                        {label ? (
                            <AppText style={styles.label} variant="caption" weight="medium">
                                {label}
                            </AppText>
                        ) : null}

                        <TextInput
                            style={[styles.input, isFocused && styles.inputFocused, error && styles.inputError]}
                            value={inputValue}
                            onChangeText={handleChangeText}
                            placeholder={placeholder}
                            placeholderTextColor={styles.placeholder.color}
                            keyboardType={keyboardType}
                            autoCapitalize={autoCapitalize}
                            onFocus={handleFocus}
                            onBlur={handleBlur}
                            autoFocus={true}
                            selectTextOnFocus={true}
                            accessible={true}
                            accessibilityLabel={label || placeholder}
                            accessibilityRole="text"
                        />

                        {error ? (
                            <AppText style={styles.errorText} variant="caption">
                                {error}
                            </AppText>
                        ) : null}
                    </View>

                    <View style={styles.buttonsRow}>
                        <AppButton title={cancelText} onPress={handleCancel} style={styles.cancelButton} textStyle={styles.cancelButtonText} />
                        <AppButton title={confirmText} onPress={handleConfirm} style={styles.confirmButton} />
                    </View>
                </View>
            </View>
        </Modal>
    );
}

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

module.exports = InputDialog;
