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

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

const React = require('react'); //React
const { View } = require('react-native'); //Базовые компоненты
const AppText = require('../common/AppText'); //Текст приложения
const { APP_COLORS } = require('../../config/theme'); //Цветовая схема
const { MENU_ITEM_ID_SETTINGS, MENU_ITEM_ID_ABOUT, MENU_ITEM_ID_LOGIN, MENU_ITEM_ID_LOGOUT } = require('../../config/menuItemIds'); //ID пунктов меню
const { responsiveSize } = require('../../utils/responsive'); //Адаптивные утилиты
const styles = require('../../styles/menu/MenuItemIcon.styles'); //Стили иконки

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

//Количество зубцов шестерёнки и угол шага (градусы)
const SETTINGS_TEETH_COUNT = 6;
const SETTINGS_TEETH_ANGLE_STEP = 360 / SETTINGS_TEETH_COUNT;

//Формирование массива элементов зубцов шестерёнки
function getTeethViews(teeth, iconColor) {
    const views = [];
    for (let index = 0; index < teeth.length; index++) {
        const angle = teeth[index];
        views.push(
            <View
                key={`tooth-${index}`}
                style={[
                    styles.settingsTooth,
                    { backgroundColor: iconColor },
                    {
                        transform: [{ rotate: `${angle}deg` }, { translateY: -responsiveSize(8) }]
                    }
                ]}
            />
        );
    }
    return views;
}

//Иконка «Настройки» (шестерёнка)
function SettingsIcon({ color }) {
    const iconColor = color ?? APP_COLORS.textPrimary;

    const teeth = React.useMemo(() => {
        return Array.from({ length: SETTINGS_TEETH_COUNT }, (_, i) => i * SETTINGS_TEETH_ANGLE_STEP);
    }, []);

    const toothViews = React.useMemo(() => getTeethViews(teeth, iconColor), [teeth, iconColor]);

    return (
        <View style={styles.container}>
            <View style={[styles.settingsCircle, { borderColor: iconColor }]} />
            {toothViews}
        </View>
    );
}

//Иконка «О приложении» (информация)
function AboutIcon({ color }) {
    const iconColor = color ?? APP_COLORS.textPrimary;

    return (
        <View style={styles.container}>
            <View style={[styles.aboutCircle, { borderColor: iconColor }]}>
                <AppText style={[styles.aboutText, { color: iconColor }]}>i</AppText>
            </View>
        </View>
    );
}

//Иконка «Вход»
function LoginIcon({ color }) {
    const iconColor = color ?? APP_COLORS.textPrimary;

    return (
        <View style={styles.container}>
            <View style={[styles.loginFrame, { borderColor: iconColor }]}>
                <View style={[styles.loginArrow, { borderLeftColor: iconColor }]} />
            </View>
        </View>
    );
}

//Иконка «Выход»
function LogoutIcon({ color }) {
    const iconColor = color ?? APP_COLORS.textPrimary;

    return (
        <View style={styles.container}>
            <View style={[styles.logoutFrame, { borderColor: iconColor }]}>
                <View style={[styles.logoutArrow, { borderRightColor: iconColor }]} />
            </View>
        </View>
    );
}

//Рендер иконки по имени пункта меню
function renderIconByName(name, color) {
    switch (name) {
        case MENU_ITEM_ID_SETTINGS:
            return <SettingsIcon color={color} />;
        case MENU_ITEM_ID_ABOUT:
            return <AboutIcon color={color} />;
        case MENU_ITEM_ID_LOGIN:
            return <LoginIcon color={color} />;
        case MENU_ITEM_ID_LOGOUT:
            return <LogoutIcon color={color} />;
        default:
            return null;
    }
}

//Компонент иконки пункта меню
function MenuItemIcon({ name, color }) {
    const iconElement = React.useMemo(() => renderIconByName(name, color), [name, color]);

    if (iconElement == null) {
        return null;
    }

    return iconElement;
}

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

module.exports = MenuItemIcon;
module.exports.renderIconByName = renderIconByName;
