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

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

const React = require('react'); //React
const { ScrollView, View } = require('react-native'); //Базовые компоненты
const MenuItem = require('./MenuItem'); //Элемент меню
const MenuItemIcon = require('./MenuItemIcon'); //Иконка пункта меню
const EmptyMenu = require('./EmptyMenu'); //Пустое меню
const MenuDivider = require('./MenuDivider'); //Разделитель меню
const { MENU_ITEM_ID_DIVIDER } = require('../../config/menuItemIds'); //ID разделителя
const styles = require('../../styles/menu/MenuList.styles'); //Стили списка меню

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

//Иконка для пункта меню
function resolveItemIcon(item) {
    if (item.icon != null) {
        return item.icon;
    }
    if (item.id != null && item.id !== MENU_ITEM_ID_DIVIDER) {
        return <MenuItemIcon name={item.id} color={item.iconColor} />;
    }
    return null;
}

//Формирование массива элементов списка меню
function getMenuListElements(items, onItemPress) {
    if (!Array.isArray(items) || items.length === 0) {
        return [];
    }
    const elements = [];
    for (let index = 0; index < items.length; index++) {
        const item = items[index];
        if (item.type === 'divider') {
            elements.push(<MenuDivider key={item.id || `menu-divider-${index}`} />);
        } else {
            elements.push(<MenuItemRow key={item.id || `menu-item-${index}`} item={item} index={index} items={items} onItemPress={onItemPress} />);
        }
    }
    return elements;
}

//Строка меню с элементом
function MenuItemRow({ item, index, items, onItemPress }) {
    const handlePress = React.useCallback(() => {
        onItemPress(item);
    }, [item, onItemPress]);

    const icon = React.useMemo(() => resolveItemIcon(item), [item]);

    return (
        <View>
            <MenuItem
                title={item.title}
                icon={icon}
                onPress={handlePress}
                isDestructive={item.isDestructive}
                disabled={item.disabled}
                style={item.style}
                textStyle={item.textStyle}
            />
            {item.showDivider && index < items.length - 1 && <MenuDivider />}
        </View>
    );
}

//Список элементов меню
function MenuList({ items = [], onClose, style }) {
    const handleItemPress = React.useCallback(
        item => {
            if (typeof onClose === 'function') {
                onClose();
            }
            if (typeof item.onPress === 'function') {
                item.onPress();
            }
        },
        [onClose]
    );

    const listElements = React.useMemo(() => getMenuListElements(items, handleItemPress), [items, handleItemPress]);

    if (!Array.isArray(items) || items.length === 0) {
        return <EmptyMenu />;
    }

    return (
        <ScrollView style={[styles.scrollView, style]} showsVerticalScrollIndicator={false} bounces={false}>
            {listElements}
        </ScrollView>
    );
}

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

module.exports = MenuList;
