/* ==========================================================================
   Accordion handler
   - Handles the accordion component which has the proper classes.
 ========================================================================== */

export const TabHandler = {

    tabContainer: '',
    tabs: '',

    init: function () {
        TabHandler.tabContainer = document.querySelector('.js-webinar-tabs')
        TabHandler.tabs = document.querySelectorAll('.js-tab')

        const intendedTab = window.location.href.split('#', 2)[1] ?? null;

        TabHandler.tabs.forEach((tab) => {
            tab.addEventListener('click', () => TabHandler.activeTab(tab))
            if (tab.href.split('#', 2)[1] === intendedTab) {
                TabHandler.activeTab(tab)
            }
        })
    },

    activeTab: function (tab) {
        TabHandler.deactivateAllTabs()
        const tabNumber = tab.getAttribute('data-tab');
        const activateTabs = TabHandler.tabContainer.querySelectorAll(`[data-tab="${tabNumber}"]`);

        if (activateTabs.length > 0) {
            activateTabs.forEach((tab) => {
                tab.classList.add('active')
            })
        }
    },

    deactivateAllTabs: function () {
        const tabs = TabHandler.tabContainer.querySelectorAll('[data-tab]')

        tabs.forEach((tab) => {
            tab.classList.remove('active')
        })
    }
};