/* ==========================================================================
   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 tabs match
        if(triggers.length !== tabs.length) {
            console.error(`There are ${triggers.length} trigger buttons and ${tabs.length} tabs. These must match.`)
        }

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

            // Check if clicked on a step button (prev or next)
            if(event.target.closest('.js-tabs-step')) {
                const dir = event.target.closest('.js-tabs-step').getAttribute('data-step');
                TabsHandler.stepTabs(dir, triggers, tabsContent);
            }

            // 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 tabs
            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) {
                    tabsTrigger.classList.add('is-active');
                    tabsTrigger.tabIndex = -1;
                    tabsTab.classList.add('is-active');
                }
            }
        }
    },

    stepTabs: function (dir, triggers, tabsContent) {
        const triggerCount = triggers.length;
        let activeId = 1;
        let newId = 0;

        if(isset(triggers) && triggerCount > 0){

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

                // Set activeId
                if(tabsTab.classList.contains('is-active')){
                    activeId = Number(tabsTab.getAttribute('data-tab-id'));
                }

                // Check what next Id will be
                if(dir === 'next') {
                    if (activeId === triggerCount) {
                        newId = 0;
                    } else {
                        newId = activeId;
                    }
                } else if (dir === 'prev') {
                    if (activeId === 1) {
                        newId = triggerCount - 1;
                    } else {
                        newId = activeId - 2;
                    }
                }

                // Remove active class
                tabsTrigger.tabIndex = 0;
                tabsTab.classList.remove('is-active');
                tabsTrigger.classList.remove('is-active');
            }

            triggers[newId].tabIndex = -1;
            triggers[newId].classList.add('is-active');
            tabs[newId].classList.add('is-active');

        }
    }
};

TabsHandler.init();