/* ==========================================================================
   Subnav handler
   - Handles the subnav component which has the proper classes.
 ========================================================================== */

const SubnavHandler = {

    init: function () {
        SubnavHandler.resizeSubnav();
    },

    resizeSubnav: function () {
        const subnavTriggerList = document.querySelectorAll('.js-subnav-trigger');
        const subnavList = document.querySelectorAll('.js-subnav');
        const headerRect = document.querySelector('.js-header-main').getBoundingClientRect();

        if(subnavTriggerList.length !== subnavList.length){
            console.error('Number of triggers (`.js-subnav-trigger`) must match number of subnav elements (`.js-subnav`)');
            return;
        }

        if(isset(subnavTriggerList) && isset(subnavList) && subnavTriggerList.length !== 0 && subnavList.length !== 0){
            for(let i = 0; i < subnavTriggerList.length; i++){
                const subnav = subnavList[i];
                const subnavRect = subnav.getBoundingClientRect();
                const subnavColumnCount = subnav.querySelectorAll('.c-subnav__column').length;
                const subnavTriggerOffset = subnavTriggerList[i].getBoundingClientRect().left;
                const subnavTriggerWidth = subnavTriggerList[i].getBoundingClientRect().width;
                const subnavTriggerShift = (subnavTriggerWidth/2) - 16;
                const subnavArrow = subnav.querySelector('.js-subnav-arrow');
                const subnavArrowOffset = 120;
                const subnavPos = subnavTriggerOffset - headerRect.left - subnavArrowOffset + subnavTriggerShift + 'px';
                const arrowShift = subnavTriggerOffset - headerRect.left + subnavTriggerShift + 'px';

                // Position subnav under trigger
                subnav.style.left = subnavPos;
                subnav.removeAttribute('hidden');

                if(subnavColumnCount >= 4){
                    subnavArrow.style.left = arrowShift;
                    subnav.style.left = 0;
                    subnav.style.right = 0;
                }
                // If subnav touches the right side make it full width by setting left to zero
                else if(subnavRect.right === headerRect.right) {
                    subnavArrow.style.left = arrowShift;
                    subnav.style.left = 0;
                } else {
                    subnavArrow.style.left = '';
                    subnav.style.left = subnavPos;
                }

            }
        }

    }
};

SubnavHandler.init();