#include utility.js

Umi.UI.Menus = (function() {
    const ids = [];

    const sidebarMenu = 'sidebar__menu';
    const sidebarMenuActive = 'sidebar__menu--active';
    const sidebarMenuHidden = 'sidebar__menu--hidden';
    const sidebarSelectorMode = 'sidebar__selector-mode';
    const sidebarSelectorModeActive = 'sidebar__selector-mode--active';
    const sidebarSelectorModeAttention = 'sidebar__selector-mode--attention';
    const sidebarSelectorModeHidden = 'sidebar__selector-mode--hidden';

    const attention = function(baseId, mode) {
        if(mode === undefined)
            mode = true;
        
        const element = $i('umi-menu-icons-' + baseId);
        element.classList.remove(sidebarSelectorModeHidden);

        if(mode && !element.classList.contains(sidebarSelectorModeAttention) && !element.classList.contains('active'))
            element.classList.add(sidebarSelectorModeAttention);
        else if(!mode && element.classList.contains(sidebarSelectorModeAttention))
            element.classList.remove(sidebarSelectorModeAttention);
    };

    const activate = function(baseId) {
        const icon = 'umi-menu-icons-' + baseId,
            menu = 'umi-menus-' + baseId;

        const menuToggle = Umi.UI.Toggles.Get('menu-toggle');
        if(menuToggle.className.indexOf('closed') !== -1)
            menuToggle.click();

        attention(baseId, false);

        $c(sidebarMenuActive)[0].classList.remove(sidebarMenuActive);
        $i(menu).classList.add(sidebarMenuActive);

        $c(sidebarSelectorModeActive)[0].classList.remove(sidebarSelectorModeActive);
        $i(icon).classList.add(sidebarSelectorModeActive);
    };

    return {
        Add: function(baseId, title, initiallyHidden) {
            if(ids.includes(baseId))
                return;
            ids.push(baseId);

            const menuClass = [sidebarMenu, `${sidebarMenu}--${baseId}`];
            const iconClass = [sidebarSelectorMode, `${sidebarSelectorMode}--${baseId}`];

            const menus = $i('umi-menus');
            const icons = $i('umi-menu-icons');

            if(menus.children.length < 1) {
                menuClass.push(sidebarMenuActive);
                iconClass.push(sidebarSelectorModeActive);
            }

            if(initiallyHidden) {
                menuClass.push(sidebarMenuHidden);
                iconClass.push(sidebarSelectorModeHidden);
            }

            icons.appendChild($e({
                attrs: {
                    id: `umi-menu-icons-${baseId}`,
                    classList: iconClass,
                    title: title,
                    onclick: function() {
                        activate(baseId);
                    },
                },
            }));

            menus.appendChild($e({ attrs: { 'class': menuClass, id: `umi-menus-${baseId}` } }));
        },
        Get: function(baseId, icon) {
            const id = (icon ? 'umi-menu-icons' : 'umi-menus') + '-' + baseId;
            if(ids.indexOf(baseId) >= 0)
                return $i(id);

            return null;
        },
        Remove: function(baseId) {
            $ri('umi-menu-icons-' + baseId);
            $ri('umi-menus-' + baseId);
        },
        Activate: activate,
        Attention: attention,
        Active: function() {
            return $c(sidebarMenuActive)[0].id.substring(10); // LOL
        },
    };
})();