const vuca = {};

vuca.menu = {
    _activeClass: 'navActive',
    _triggerId: 'navTrigger',
    _overlay: 'navTriggerOverlay',
    _navId: 'vucaMenu',
    _menuItems: [
        { name: 'Instructions', conversations: 'Instructions' },
        { name: 'Resources', conversations: 'Resources' },
        { name: 'Module 1 Review', conversations: 'Module 1 - Review', varName: '_progressM1' },
        { name: 'Module 2 Review', conversations: 'Module 2 - Review', varName: '_progressM2' },
        { name: 'Module 3 Review', conversations: 'Module 3 - Review', varName: '_progressM3' },
        { name: 'Module 4 Review', conversations: 'Module 4 - Review', varName: '_progressM4' },
        { name: 'Module 5 Review', conversations: 'Module 5 - Review', varName: '_progressM5' },
        { name: 'Module 6 Review', conversations: 'Module 6 - Review', varName: '_progressM6' }
    ],
    init: function () {
        this.clickHandlers();
    },
    clickHandlers: function () {
        // menu toggle 
        document.getElementById(vuca.menu._triggerId).addEventListener('click', vuca.menu.toggleMenu);

        // overlay click
        document.getElementById(vuca.menu._overlay).addEventListener('click', vuca.menu.hideMenu);


        // nav item click
        document.getElementById(vuca.menu._navId).addEventListener('click', vuca.menu.triggerConversation);
    },
    toggleMenu: function () {
        document.body.classList.toggle(vuca.menu._activeClass);
        if (document.body.classList.contains(vuca.menu._activeClass)) {
            vuca.menu.loadMenuInit()
        }
    },
    hideMenu: function () {
        document.body.classList.remove(vuca.menu._activeClass);
    },
    loadMenuInit: function () {
        vuca.menu.loadMenu();
    },
    loadMenu: function () {
        var i;
        var menuUl = document.getElementById(vuca.menu._navId);
        menuUl.innerHTML = "";
        var widetVariables = clLoader.getState().variables;

        for (var i = 0; i < vuca.menu._menuItems.length; i++) {
            if (vuca.menu._menuItems[i].varName) {
                var conversationVariable = widetVariables.find(function (item) {
                    return item.key === vuca.menu._menuItems[i].varName
                }
                )
                if (!conversationVariable || conversationVariable.value !== '1') {
                    return;
                }
            }
            var li = document.createElement("li");
            li.setAttribute('data-conversation', vuca.menu._menuItems[i].conversations)
            li.appendChild(document.createTextNode(vuca.menu._menuItems[i].name));
            menuUl.append(li)
        }

    },
    triggerConversation: function (e) {
        try {
            clLoader.triggerConversation(e.target.dataset.conversation)
        } catch(e) {

        }

        vuca.menu.hideMenu()
    }
};

vuca.base = vuca.base || {};
vuca.base = {
    init: function () {
        vuca.menu.init();
    }
};