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

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

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

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

//Стиль кнопки закрытия меню при нажатии
function getMenuCloseButtonPressableStyle(stylesRef) {
    return function styleFn({ pressed }) {
        return [stylesRef.closeButton, pressed && stylesRef.closeButtonPressed];
    };
}

//Заголовок меню
function MenuHeader({ title, onClose, showCloseButton = true, style }) {
    const handleClose = React.useCallback(() => {
        if (typeof onClose === 'function') {
            onClose();
        }
    }, [onClose]);

    const getCloseButtonPressableStyle = React.useMemo(() => getMenuCloseButtonPressableStyle(styles), []);

    return (
        <View style={[styles.header, style]}>
            <AppText style={styles.title} numberOfLines={2}>
                {title || 'Меню'}
            </AppText>
            {showCloseButton ? (
                <Pressable accessibilityRole="button" accessibilityLabel="Закрыть меню" onPress={handleClose} style={getCloseButtonPressableStyle}>
                    <View style={styles.closeButtonIcon}>
                        <AppText style={styles.closeButtonText}>×</AppText>
                    </View>
                </Pressable>
            ) : null}
        </View>
    );
}

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

module.exports = MenuHeader;
