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

const TabsliderHandler = {
    tabsliderList : null,
    tabslider : null,
    tabsliderTimeouts: [],
    autoSlideTiming: 5000,

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

        let hasAutoSlide = false;
        if( tabslider.getAttribute('data-auto-slide') == 'true' ) {

            if(tabslider.id == '') console.warn('Provide the tabslider with a (unique) id to be able to auto slide');
            else {

                hasAutoSlide = true;
                TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
                    TabsliderHandler.triggerAutoSlide(tabslider);
                }, TabsliderHandler.autoSlideTiming);

            }
        }

        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, tabslider);

            // Only scroll to when tab are below
            if(window.innerWidth < 1200) {
                const activeTabHeading = tabslider.querySelector('.js-tabslider-container .js-tabslider-content.is-active h2');
                ScrollToHandler.scrollToElement(activeTabHeading);
            }

            if(hasAutoSlide) {
                clearTimeout(TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id]);
                TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
                    TabsliderHandler.triggerAutoSlide(tabslider);
                }, TabsliderHandler.autoSlideTiming);
            }

        });
    },

    triggerAutoSlide: function (tabslider) {

        let activeTab = parseInt(tabslider.querySelector('.is-active').getAttribute('data-tab-id'));
        const tabs = tabslider.querySelectorAll('.js-tabslider-container .js-tabslider-content');

        activeTab++;
        if(activeTab > tabs.length) activeTab = 1;

        TabsliderHandler.toggleTabslider(activeTab, tabslider);
        TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
            TabsliderHandler.triggerAutoSlide(tabslider);
        }, TabsliderHandler.autoSlideTiming);
    },

    toggleTabslider: function (tabId, tabslider) {

        const triggers = tabslider.querySelectorAll('.js-tabslider-trigger');
        const tabs = tabslider.querySelectorAll('.js-tabslider-container .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.`)
        }

        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();