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

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

const React = require('react'); //React
const { Modal, View, Animated, Pressable } = require('react-native'); //Базовые компоненты
const { useSafeAreaInsets } = require('react-native-safe-area-context'); //Отступы безопасной области
const MenuHeader = require('./MenuHeader'); //Заголовок меню
const MenuUserInfo = require('./MenuUserInfo'); //Информация о пользователе
const MenuList = require('./MenuList'); //Список элементов меню
const { widthPercentage, isTablet } = require('../../utils/responsive'); //Адаптивные утилиты
const {
    MENU_WIDTH_PHONE_PERCENT,
    MENU_WIDTH_TABLET_PERCENT,
    MENU_MAX_WIDTH,
    MENU_MIN_WIDTH,
    ANIMATION_DURATION_OPEN,
    ANIMATION_DURATION_CLOSE
} = require('../../config/menuConfig'); //Конфигурация меню
const styles = require('../../styles/menu/SideMenu.styles'); //Стили бокового меню

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

//Расчёт ширины меню с учётом адаптивности
const calculateMenuWidth = () => {
    const percent = isTablet() ? MENU_WIDTH_TABLET_PERCENT : MENU_WIDTH_PHONE_PERCENT;
    const percentWidth = widthPercentage(percent);
    return Math.max(MENU_MIN_WIDTH, Math.min(percentWidth, MENU_MAX_WIDTH));
};

//Боковое меню приложения
function SideMenu({ visible, onClose, items = [], title = 'Меню', mode, username, organization, headerStyle, containerStyle, contentStyle }) {
    //Определение подключено ли приложение
    const isConnected = mode === 'ONLINE' || mode === 'OFFLINE';
    //Получаем отступы безопасной области
    const insets = useSafeAreaInsets();

    //Вычисляем ширину меню
    const menuWidth = calculateMenuWidth();

    //Анимированные значения
    const translateX = React.useRef(new Animated.Value(menuWidth)).current;
    const backdropOpacity = React.useRef(new Animated.Value(0)).current;

    //Флаг видимости модального окна
    const [modalVisible, setModalVisible] = React.useState(false);

    //Стили с учётом safe area
    const safeAreaStyle = React.useMemo(
        () => ({
            paddingTop: insets.top,
            paddingBottom: insets.bottom,
            paddingRight: insets.right
        }),
        [insets.top, insets.bottom, insets.right]
    );

    //Обработка открытия меню
    const openMenu = React.useCallback(() => {
        setModalVisible(true);
        translateX.setValue(menuWidth);
        backdropOpacity.setValue(0);

        Animated.parallel([
            Animated.timing(translateX, {
                toValue: 0,
                duration: ANIMATION_DURATION_OPEN,
                useNativeDriver: true
            }),
            Animated.timing(backdropOpacity, {
                toValue: 1,
                duration: ANIMATION_DURATION_OPEN,
                useNativeDriver: true
            })
        ]).start();
    }, [translateX, backdropOpacity, menuWidth]);

    //Обработка закрытия меню
    const closeMenu = React.useCallback(() => {
        Animated.parallel([
            Animated.timing(translateX, {
                toValue: menuWidth,
                duration: ANIMATION_DURATION_CLOSE,
                useNativeDriver: true
            }),
            Animated.timing(backdropOpacity, {
                toValue: 0,
                duration: ANIMATION_DURATION_CLOSE,
                useNativeDriver: true
            })
        ]).start(() => {
            setModalVisible(false);
        });
    }, [translateX, backdropOpacity, menuWidth]);

    //Обработчик нажатия на задний фон
    const handleBackdropPress = React.useCallback(() => {
        if (typeof onClose === 'function') {
            onClose();
        }
    }, [onClose]);

    //Обработчик аппаратной кнопки "Назад" (Android)
    const handleRequestClose = React.useCallback(() => {
        if (typeof onClose === 'function') {
            onClose();
        }
    }, [onClose]);

    //Отслеживание изменения видимости
    React.useEffect(() => {
        if (visible) {
            openMenu();
        } else if (modalVisible) {
            closeMenu();
        }
    }, [visible, modalVisible, openMenu, closeMenu]);

    return (
        <Modal visible={modalVisible} transparent={true} animationType="none" statusBarTranslucent={true} onRequestClose={handleRequestClose}>
            <View style={styles.modalContainer}>
                <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
                    <Pressable style={styles.backdropPressable} onPress={handleBackdropPress} />
                </Animated.View>

                <Animated.View
                    style={[
                        styles.menuContainer,
                        safeAreaStyle,
                        {
                            width: menuWidth,
                            transform: [{ translateX }]
                        },
                        containerStyle
                    ]}
                >
                    <MenuHeader title={title} onClose={onClose} style={[styles.header, headerStyle]} />

                    <MenuUserInfo mode={mode} username={username} organization={organization} isConnected={isConnected} />

                    <MenuList items={items} onClose={onClose} style={contentStyle} />
                </Animated.View>
            </View>
        </Modal>
    );
}

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

module.exports = SideMenu;
