/**
 * Script for mobile hamburger menu
 *
 * Handles toggling the slide-in navigation menu for small screens
 * and enables TAB key navigation support for dropdown menus.
 */

(function () {
	// Elements
	const hamburgerBtn = document.getElementById('mmenu-btn');
	const smMenu = document.getElementById('mobile-navigation');

	if (!smMenu || !hamburgerBtn) {
		return;
	}

	const overlay = smMenu.querySelector('.mobile-menu-overlay');
	const panel = smMenu.querySelector('.mobile-menu-panel');
	const closeBtn = smMenu.querySelector('.mobile-menu-close');

	// Open / Close functions
	function openMenu() {
		hamburgerBtn.classList.add('is-active');
		hamburgerBtn.setAttribute('aria-expanded', 'true');
		overlay.classList.add('is-visible');
		panel.classList.add('is-open');
		document.body.classList.add('mobile-menu-open');
	}

	function closeMenu() {
		hamburgerBtn.classList.remove('is-active');
		hamburgerBtn.setAttribute('aria-expanded', 'false');
		overlay.classList.remove('is-visible');
		panel.classList.remove('is-open');
		document.body.classList.remove('mobile-menu-open');
	}

	// Toggle on hamburger click
	hamburgerBtn.addEventListener('click', function (e) {
		e.stopPropagation();
		if (hamburgerBtn.getAttribute('aria-expanded') === 'true') {
			closeMenu();
		} else {
			openMenu();
		}
	});

	// Close on overlay click
	if (overlay) {
		overlay.addEventListener('click', closeMenu);
	}

	// Close on X button click
	if (closeBtn) {
		closeBtn.addEventListener('click', closeMenu);
	}

	// Close on Escape key
	document.addEventListener('keydown', function (e) {
		if (e.key === 'Escape' && hamburgerBtn.getAttribute('aria-expanded') === 'true') {
			closeMenu();
			hamburgerBtn.focus();
		}
	});

	// Add chevron icons for sub-menu items
	const linkHasSub = smMenu.querySelectorAll(
		'.menu-item-has-children > .sub-menu, .page_item_has_children > .sub-menu'
	);

	for (const child of linkHasSub) {
		var icon = document.createElement('i');
		icon.className = 'fas fa-chevron-down';
		child.parentNode.insertBefore(icon, child);
	}

	const subMenuIcon = smMenu.querySelectorAll(
		'.menu-item-has-children > i, .page_item_has_children > i'
	);

	for (const iconset of subMenuIcon) {
		iconset.setAttribute('tabindex', '0');
	}

	// Toggle sub-menus on click
	for (const link of subMenuIcon) {
		link.addEventListener('click', toggleClick, true);
		link.addEventListener('focus', toggleFocus, true);
	}

	function toggleFocus(e) {
		if (!this.parentNode.classList.contains('focus')) {
			this.parentNode.classList.add('focus');
			this.parentNode.classList.remove('clicked');
		}
	}

	function toggleClick(e) {
		if (this.parentNode.classList.contains('clicked')) {
			this.parentNode.classList.remove('clicked');
		} else {
			this.parentNode.classList.add('clicked');
			this.parentNode.classList.remove('focus');
		}
	}

	// Focus trapping inside the panel
	var focusableInNav = panel.querySelectorAll(
		'button, [href], [tabindex]:not([tabindex="-1"])'
	);

	if (focusableInNav.length) {
		var firstFocusElement = focusableInNav[0];
		var lastFocusElement = focusableInNav[focusableInNav.length - 1];

		firstFocusElement.addEventListener('keydown', moveFocusToBottom, true);
		lastFocusElement.addEventListener('keydown', moveFocusToTop, true);

		function moveFocusToBottom(e) {
			if (e.key === 'Tab' && e.shiftKey) {
				e.preventDefault();
				lastFocusElement.focus();
			}
		}

		function moveFocusToTop(e) {
			if (e.key === 'Tab' && !e.shiftKey) {
				e.preventDefault();
				firstFocusElement.focus();
			}
		}
	}
})();