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

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

const React = require('react'); //React
const { View, Pressable } = require('react-native'); //Базовые компоненты
const AppText = require('../common/AppText'); //Общий текстовый компонент
const AppLogo = require('../common/AppLogo'); //Логотип приложения
const { useAppModeContext } = require('./AppModeProvider'); //Контекст режима работы
const { useAppNavigationContext } = require('./AppNavigationProvider'); //Контекст навигации
const styles = require('../../styles/layout/AppHeader.styles'); //Стили заголовка

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

//Иконка стрелки назад
function BackArrowIcon() {
    return (
        <View style={styles.backArrowIcon}>
            <View style={styles.backArrowLineTop} />
            <View style={styles.backArrowLineBottom} />
        </View>
    );
}

//Стиль кнопки назад при нажатии
function getBackButtonPressableStyle(stylesRef) {
    return function styleFn({ pressed }) {
        return [stylesRef.backButton, pressed && stylesRef.backButtonPressed];
    };
}

//Кнопка назад
function BackButton({ onPress }) {
    const getPressableStyle = React.useMemo(() => getBackButtonPressableStyle(styles), []);

    return (
        <Pressable accessibilityRole="button" accessibilityLabel="Назад" style={getPressableStyle} onPress={onPress}>
            <BackArrowIcon />
        </Pressable>
    );
}

//Заголовок приложения
function AppHeader({ title, subtitle, showMenuButton = true, onMenuPress, showBackButton = false, onBackPress }) {
    const { mode } = useAppModeContext();
    const { currentScreen, SCREENS } = useAppNavigationContext();

    //Получение заголовка экрана
    const getTitle = React.useCallback(() => {
        if (title) return title;

        switch (currentScreen) {
            case SCREENS.MAIN:
                return 'Парус© Предрейсовые осмотры';
            case SCREENS.SETTINGS:
                return 'Настройки';
            default:
                return 'Парус© Предрейсовые осмотры';
        }
    }, [title, currentScreen, SCREENS.MAIN, SCREENS.SETTINGS]);

    //Получение подзаголовка экрана
    const getSubtitle = React.useCallback(() => {
        if (subtitle) return subtitle;

        switch (currentScreen) {
            case SCREENS.MAIN:
                return mode === 'NOT_CONNECTED' ? 'Требуется настройка сервера' : 'Демонстрационный экран';
            case SCREENS.SETTINGS:
                return 'Конфигурация приложения';
            default:
                return '';
        }
    }, [subtitle, currentScreen, mode, SCREENS.MAIN, SCREENS.SETTINGS]);

    //Стиль кнопки меню при нажатии
    const getMenuButtonPressableStyle = React.useMemo(() => {
        return function styleFn({ pressed }) {
            return [styles.menuButton, pressed && styles.menuButtonPressed];
        };
    }, []);

    //Отрисовка левой части шапки (логотип или кнопка назад)
    const renderLeftSection = () => {
        if (showBackButton) {
            return <BackButton onPress={onBackPress} />;
        }

        return <AppLogo size="small" style={styles.logo} />;
    };

    return (
        <View style={styles.container}>
            <View style={styles.content}>
                {renderLeftSection()}

                <View style={styles.titleContainer}>
                    <AppText style={styles.title} numberOfLines={1}>
                        {getTitle()}
                    </AppText>
                    {getSubtitle() ? (
                        <AppText style={styles.subtitle} numberOfLines={1}>
                            {getSubtitle()}
                        </AppText>
                    ) : null}
                </View>

                {showMenuButton ? (
                    <Pressable style={getMenuButtonPressableStyle} onPress={onMenuPress}>
                        <View style={styles.menuButtonIcon}>
                            <View style={styles.menuButtonIconLine} />
                            <View style={styles.menuButtonIconLine} />
                            <View style={styles.menuButtonIconLine} />
                        </View>
                    </Pressable>
                ) : null}
            </View>
        </View>
    );
}

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

module.exports = AppHeader;
