/* ==========================================================================
   Tabslider handler
   - Handles the tabslider component which has the proper classes.
 ========================================================================== */

const TabsliderHandler = {

    init: function () {

        const tabsliderList = document.querySelectorAll('.js-tabslider');
        const tabsliderListCount = tabsliderList.length;

        if(isset(tabsliderList) && tabsliderListCount !== 0){
            for(let i = 0; i < tabsliderListCount; i++){
                const tabslider = tabsliderList[i];
                TabsliderHandler.initTabslider(tabslider);
            }
        }
    },

    initTabslider: function (tabslider) {
        tabslider.addEventListener('click', TabsliderHandler.toggleTabslider, false);
    },

    toggleTabslider: function (event) {
        const tabslider = this;
        const tabsliderContainer = tabslider.querySelector('.js-tabslider-container');
        const tabsliderTriggers = tabslider.querySelectorAll(".js-tabslider-trigger");
        const tabsliderTabs = tabsliderContainer.querySelectorAll(".js-tabslider-content");
        const tabsliderTabId = event.target.dataset.tabId;

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

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

        // Check if content element exists
        if (!tabsliderContainer) return;

        if(isset(tabsliderTabs) && tabsliderTabs.length !== 0){

            // Loop through all tabs
            for(let i = 0; i < tabsliderTabs.length; i++){
                const tabsliderTab = tabsliderTabs[i];
                tabsliderTriggers[i].classList.remove('is-active');
                tabsliderTab.classList.remove('is-active');

                if(tabsliderTab.dataset.tabId == tabsliderTabId) {
                    tabsliderTab.classList.toggle('is-active');
                    event.target.classList.toggle('is-active');
                };
            }
        }
    }
};

TabsliderHandler.init();