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

const CategoryHandler = {

    categoryToggleClass : 'js-category-toggle',
    categoryGroupClass : 'js-category-group',

    init: function () {

        const toggleList = document.querySelectorAll('.'+CategoryHandler.categoryToggleClass);
        const toggleListCount = toggleList.length;

        if(isset(toggleList) && toggleListCount !== 0){
            for(let i = 0; i < toggleListCount; i++){
                const toggle = toggleList[i];
                CategoryHandler.initToggle(toggle);
            }
        }
    },

    initToggle: function (toggle) {
        toggle.addEventListener('click', CategoryHandler.activateToggle, false);
    },

    activateToggle: function (event) {
        const item = event.target;
        const itemId = item.getAttribute('data-category')
        const allToggles = document.querySelectorAll('.'+CategoryHandler.categoryToggleClass);
        const allGroups = document.querySelectorAll('.'+CategoryHandler.categoryGroupClass);

        // Remove all active classes from toggles
        for(let i = 0; i < allToggles.length; i++){
            allToggles[i].classList.remove('is-active');
        }

        // Remove all active classes from groups
        // and show the correct group
        for(let i = 0; i < allGroups.length; i++){
            allGroups[i].classList.remove('is-active');

            if(allGroups[i].getAttribute('data-category') === itemId){
                allGroups[i].classList.add('is-active');
            }
        }

        // Prevent default link behavior
        event.preventDefault();

        // Toggle the active class
        item.classList.add('is-active');
    }
};

CategoryHandler.init();