/*
    Предрейсовые осмотры - мобильное приложение
    Модальное окно с результатом сканирования штрихкода/QR
*/

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

const React = require('react'); //React
const { Modal, View, Pressable, Platform } = require('react-native'); //Базовые компоненты
const AppText = require('../common/AppText'); //Общий текстовый компонент
const AppButton = require('../common/AppButton'); //Кнопка
const { SCAN_RESULT_MODAL_TITLE, SCAN_RESULT_CLOSE_BUTTON } = require('../../config/messages'); //Сообщения
const { noop } = require('../../utils/noop'); //Пустая функция
const styles = require('../../styles/scanner/ScanResultModal.styles'); //Стили модального окна

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

//Форматирование типа кода для отображения (например qr -> QR-код)
function formatCodeType(type) {
    if (!type || type === 'unknown') {
        return 'Неизвестный тип';
    }
    const upper = type.toUpperCase().replace(/-/g, ' ');
    if (type === 'qr') {
        return 'QR-код';
    }
    return upper;
}

//Обработчик закрытия модального окна
function handleClose(onRequestClose) {
    if (typeof onRequestClose === 'function') {
        onRequestClose();
    }
}

//Пропсы для элементов, закрывающих модальное окно: на Android отключаем фокус, чтобы Enter от встроенного сканера не вызывал закрытие
function getClosePressableProps(preventKeyClose) {
    return preventKeyClose ? { focusable: false } : {};
}

//Общий контент окна результата
function ResultContent({ displayType, displayValue, onClosePress, styles: s, preventKeyClose }) {
    const backdropProps = getClosePressableProps(preventKeyClose);
    const closeButtonProps = getClosePressableProps(preventKeyClose);
    const closeButtonFocusable = preventKeyClose ? false : undefined;

    return (
        <Pressable style={s.backdrop} onPress={onClosePress} {...backdropProps}>
            <Pressable style={s.container} onPress={noop} focusable={false}>
                <View style={s.header}>
                    <AppText style={s.title} numberOfLines={1}>
                        {SCAN_RESULT_MODAL_TITLE}
                    </AppText>
                    <Pressable
                        accessibilityRole="button"
                        accessibilityLabel="Закрыть"
                        onPress={onClosePress}
                        style={s.closeButton}
                        {...closeButtonProps}
                    >
                        <AppText style={s.closeButtonText}>×</AppText>
                    </Pressable>
                </View>
                <View style={s.content}>
                    <AppText style={s.typeLabel} variant="caption" weight="medium">
                        Тип: {displayType}
                    </AppText>
                    <View style={s.valueBlock}>
                        <AppText style={s.valueText} selectable={true}>
                            {displayValue}
                        </AppText>
                    </View>
                    <View style={s.buttonsRow}>
                        <AppButton title={SCAN_RESULT_CLOSE_BUTTON} onPress={onClosePress} focusable={closeButtonFocusable} />
                    </View>
                </View>
            </Pressable>
        </Pressable>
    );
}

//Модальное окно результата сканирования
function ScanResultModal({ visible, codeType, value, onRequestClose }) {
    const handleClosePress = React.useCallback(() => {
        handleClose(onRequestClose);
    }, [onRequestClose]);

    const modalOnRequestClose = React.useMemo(() => (Platform.OS === 'android' ? noop : handleClosePress), [handleClosePress]);

    const displayType = formatCodeType(codeType);
    const displayValue = value != null && value !== '' ? String(value) : '—';

    const preventKeyClose = Platform.OS === 'android';

    const content = (
        <ResultContent
            displayType={displayType}
            displayValue={displayValue}
            onClosePress={handleClosePress}
            styles={styles}
            preventKeyClose={preventKeyClose}
        />
    );

    if (Platform.OS === 'android') {
        if (!visible) return null;
        return (
            <View style={styles.overlay} focusable={false} importantForAccessibility="no-hide-descendants" collapsable={false}>
                <View style={styles.overlayContent} pointerEvents="box-none">
                    {content}
                </View>
            </View>
        );
    }

    return (
        <Modal animationType="fade" transparent={true} visible={!!visible} onRequestClose={modalOnRequestClose} statusBarTranslucent={true}>
            <View style={styles.modalRoot}>{content}</View>
        </Modal>
    );
}

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

module.exports = ScanResultModal;
