/* ==========================================================================
   Tabs handler
   - Handles the tabs component which has the proper classes.
 ========================================================================== */

const TabsHandler = {
    tabsList : null,
    tabs : null,

    init: function () {
        TabsHandler.tabsList = document.querySelectorAll('.js-tabs');
        const tabsListCount = TabsHandler.tabsList.length;

        if(isset(TabsHandler.tabsList) && tabsListCount !== 0){
            for(let i = 0; i < tabsListCount; i++){
                const tabs = TabsHandler.tabsList[i];
                TabsHandler.initTabs(tabs);
            }
        }
    },

    initTabs: function (tabs) {
        const container = tabs.querySelector('.js-tabs-container');

        // Check if container element exists
        if (container == null) {
            console.error(`There is no container for the content tabs defined.`);
            return;
        }

        const triggers = tabs.querySelectorAll('.js-tabs-trigger');
        const tabsContent = container.querySelectorAll('.js-tabs-content');

        // Check if number of triggers and tabsContent match
        if(triggers.length !== tabsContent.length) {
            console.error(`There are ${triggers.length} trigger buttons and ${tabsContent.length} tabs. These must match.`)
        }

        // If we have a hash in the url
        if(window.location.hash) {

            const hash = window.location.hash.substring(1);
            const hashTab = container.querySelector('[data-tab-slug="' + hash + '"]');

            // If we have the corresponding tab, then set it to active
            if(isset(hashTab)) { 
                TabsHandler.toggleTabs(hashTab.dataset.tabId, triggers, tabsContent);
            }
        }

        tabs.addEventListener('click', function (event) {

            // Bail if we didn't click on the trigger element
            if (!event.target.classList.contains('js-tabs-trigger')) return;

            // Bail if already active
            if (event.target.classList.contains('is-active')) { return; }

            TabsHandler.toggleTabs(event.target.dataset.tabId, triggers, tabsContent);

        });
    },

    toggleTabs: function (tabId, triggers, tabsContent) {

        if(isset(triggers) && triggers.length > 0){

            // Loop through all tabsContent
            for(let i = 0; i < triggers.length; i++){
                const tabsTab = tabsContent[i];
                const tabsTrigger = triggers[i];

                tabsTrigger.classList.remove('is-active');
                tabsTrigger.tabIndex = 0;
                tabsTab.classList.remove('is-active');

                if (tabsTab.dataset.tabId === tabId) {
                    history.pushState({}, '', '#' + tabsTab.dataset.tabSlug);
                    tabsTrigger.classList.add('is-active');
                    tabsTrigger.tabIndex = -1;
                    tabsTab.classList.add('is-active');
                }
            }
        }
    },
};

TabsHandler.init();