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

export const TabsliderHandler = {

    tabsliderList : null,
    tabslider : null,
    currentIndex: 1,

    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');
        const arrow_prev = tabslider.querySelector('.js-tabslider-arrow-prev');
        const arrow_next = tabslider.querySelector('.js-tabslider-arrow-next');

        // 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 (arrow_prev !== null) {
            arrow_prev.addEventListener('click', function (event) {
                if (TabsliderHandler.currentIndex !== 1) {
                    //decrease tabslider
                    TabsliderHandler.currentIndex--
                    TabsliderHandler.toggleTabslider(triggers, tabs, images);
                    arrow_next.classList.remove('is-disabled')
                    if (TabsliderHandler.currentIndex === 1) {
                        arrow_prev.classList.add('is-disabled')
                    }
                }
            })
        }

        if (arrow_next !== null) {
            arrow_next.addEventListener('click', function (event) {
                if (TabsliderHandler.currentIndex !== triggers.length) {
                    //increase tabslider
                    TabsliderHandler.currentIndex++
                    TabsliderHandler.toggleTabslider(triggers, tabs, images);
                    arrow_prev.classList.remove('is-disabled')
                    if (TabsliderHandler.currentIndex === triggers.length) {
                        arrow_next.classList.add('is-disabled')
                    }
                }
            })
        }


        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.currentIndex = parseInt(event.target.dataset.tabId)
            TabsliderHandler.toggleTabslider(triggers, tabs, images);

            if (arrow_next !== null) {
                if(TabsliderHandler.currentIndex === triggers.length)
                    arrow_next.classList.add('is-disabled')
                else
                    arrow_next.classList.remove('is-disabled')
            }

            if (arrow_prev !== null) {
                if (TabsliderHandler.currentIndex === 1)
                    arrow_prev.classList.add('is-disabled')
                else
                    arrow_prev.classList.remove('is-disabled')
            }

            if(window.innerWidth <= 600) {
                ScrollToHandler.prepareScrollTo(tabs[0], 20);
            }
            // console.log(window.innerWidth);

        });
    },

    toggleTabslider: function (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 == TabsliderHandler.currentIndex) {
                    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 == TabsliderHandler.currentIndex) {
                            tabsliderImage.classList.add('is-active');
                        }
                    }
                    else {
                        console.error(`There are ${triggers.length} trigger buttons and ${images.length} tabslider images. These must match.`);
                    }
                }

            }
        }
    }
};