import $ from "jquery";

function PallyToggleButtonClick(id) {
   let el = document.querySelector('button[data-uid="' + id + '"]');
   let container = document.getElementById('site-navigation');

   PallyNavToggleFocusByEl(el);

   // Toggle the "toggled-on" class.
   el.classList.toggle('toggled-on');
   container.classList.toggle('toggled-on');

   // Toggle aria-expanded.
   if (el.classList.contains('toggled-on')) {
      el.setAttribute('aria-expanded', 'true');
   } else {
      el.setAttribute('aria-expanded', 'false');
   }
}

window.onload = function() {
   let NavLinks = document.querySelectorAll('.menu-item a'),
      i;
   for (i = 0; i < NavLinks.length; i++) {
      NavLinks[i].addEventListener('focus', PallyNavToggleFocus, true);
      NavLinks[i].addEventListener('blur', PallyNavToggleFocus, true);
   }

   let MenuButton = document.querySelector('.menu-toggle');
   if ('undefined' !== typeof MenuButton) {
      MenuButton.addEventListener('click', function(e) {
         PallyToggleButtonClick('toggle-primary');
      });
   }

};

function PallyNavToggleFocus() {
   PallyNavToggleFocusByEl(this);
}

function PallyNavToggleFocusByEl(el) {
   let isMenu = el.closest('.primary-menu'),
      closestSubMenu,
      closestUl,
      allOpenSubMenuButtons,
      i;

      if ( isMenu ) {
         closestSubMenu        = el.closest( '.sub-menu' );
         closestUl             = closestSubMenu ? closestSubMenu.closest( 'ul' ) : el.closest( 'ul' );
         allOpenSubMenuButtons = closestUl.querySelectorAll( '.menu-item .toggled-on' );
         for ( i = 0; i < allOpenSubMenuButtons.length; i++ ) {
            if ( null === closestSubMenu || ( closestSubMenu && closestSubMenu.parentNode.querySelector( '.menu-item .toggled-on' ) !== allOpenSubMenuButtons[ i ] ) ) {
               if ( allOpenSubMenuButtons[ i ] !== el ) {
                  allOpenSubMenuButtons[ i ].classList.remove( 'toggled-on' );
                  allOpenSubMenuButtons[ i ].setAttribute( 'aria-expanded', 'false' );
               }
            }
         }
      }

}


/**
 * Handle clicks on the main menu parts.
 *
 * @param {Element} el
 */
function PallyMenuItemExpand(el) {
   let ul = el.closest('li').querySelector('ul'),
      expand = ('none' === window.getComputedStyle(ul).display);
   ul.style.display = expand ? 'block' : 'none';
   if (expand) {
      el.classList.add('active');
      el.setAttribute('aria-expanded', 'true');
      ul.setAttribute('tabindex', '-1');
   } else {
      el.setAttribute('aria-expanded', 'false');
      el.classList.remove('active');
   }
}

document.querySelectorAll('.primary-menu ul.sub-menu').forEach(function (subMenu) {
	subMenu.addEventListener('blur', function (e) {
		let prev = e.target,
			next = e.relatedTarget,
			prevUl = prev ? prev.closest('.sub-menu') : null,
			nextUl = next ? next.closest('.sub-menu') : null;

		if (prevUl && prevUl !== nextUl && (!nextUl || !prevUl.contains(nextUl))) {
			prevUl.style.display = 'none';
			prevUl.parentNode.querySelector('button').classList.remove('active');
		}
	}, true);
});

document.querySelectorAll('.primary-menu .menu-item button').forEach(function (openSubMenu) {
   openSubMenu.addEventListener('click', function (e) {
      PallyMenuItemExpand(e.currentTarget);
   })
})

$(window).on('resize', function() {
   if ($('.navholder').outerWidth() > 840) {
      if ($('.navholder').outerHeight() > 80) {
         $('.navholder .col-100').css('flex', 'none');
         $('.navholder .col-100').css('width', '100%');
      }
      if ($('.navholder').outerWidth() > 1280) {
         $('.navholder .col-100').css('flex', '');
         $('.navholder .col-100').css('width', '');
      }
   }
});
$(window).resize();