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

const TabsliderHandler = {
    tabsliderList : null,
    tabslider : null,

    init: function () {
        TabsliderHandler.tabsliderList = document.querySelectorAll('.js-tabslider');
        const tabsliderListCount = TabsliderHandler.tabsliderList.length;

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

    initTabslider: function (tabslider) {
        const container = tabslider.querySelector('.js-tabslider-container');

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

        const triggers = tabslider.querySelectorAll('.js-tabslider-trigger');
        const tabs = container.querySelectorAll('.js-tabslider-content');
        const images = document.querySelectorAll('.js-tabslider-image');

        // 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.`)
        }

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

            // 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; }

            TabsliderHandler.toggleTabslider(event.target.dataset.tabId, triggers, tabs, images);

        });
    },

    toggleTabslider: function (tabId, triggers, tabs, images) {

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

            // Loop through all tabs
            for(let i = 0; i < triggers.length; i++){
                const tabsliderTab = tabs[i];
                const tabsliderTrigger = triggers[i];

                tabsliderTrigger.classList.remove('is-active');
                tabsliderTab.classList.remove('is-active');

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

                // Check if images in header are set for the tabslider
                if(images.length > 0) {

                    // Bail if not the first tabslider. Only the first tabslider gets to control the header/hero images
                    if (tabsliderTab.closest('.js-tabslider') !== TabsliderHandler.tabsliderList[0]) { return; }

                    const tabsliderImage = images[i];

                    if(typeof tabsliderImage != 'undefined') {
                        tabsliderImage.classList.remove('is-active');
                        if (tabsliderImage.dataset.tabId === tabId) {
                            tabsliderImage.classList.add('is-active');
                        }
                    }
                    else {
                        console.error(`There are ${triggers.length} trigger buttons and ${images.length} tabslider images. These must match.`);
                    }
                }

            }
        }
    }
};

TabsliderHandler.init();