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


(function(){
	// Select all variables
	const smButton = document.getElementById('mmenu-btn');
	const smMenu = document.getElementById('mobile-navigation');
	const overlay = document.querySelector('.mobile-menu-overlay');
	const closeBtn = document.querySelector('.mobile-menu-close');

	if (!smMenu) {
		return;
	}

	// Toggle menu function
	function toggleMenu(open) {
		if (open) {
			smMenu.classList.add('menu-active');
			smButton.setAttribute('aria-expanded', 'true');
			if (overlay) overlay.classList.add('active');
			document.body.style.overflow = 'hidden';
		} else {
			smMenu.classList.remove('menu-active');
			smButton.setAttribute('aria-expanded', 'false');
			if (overlay) overlay.classList.remove('active');
			document.body.style.overflow = '';
		}
	}

	// Button click event
	smButton.addEventListener('click', function(e) {
		e.stopPropagation();
		const isExpanded = smButton.getAttribute('aria-expanded') === 'true';
		toggleMenu(!isExpanded);
	});

	// Close button click
	if (closeBtn) {
		closeBtn.addEventListener('click', function() {
			toggleMenu(false);
		});
	}

	// Overlay click to close
	if (overlay) {
		overlay.addEventListener('click', function() {
			toggleMenu(false);
		});
	}

	// Close menu on Escape key
	document.addEventListener('keydown', function(e) {
		if (e.key === 'Escape' && smMenu.classList.contains('menu-active')) {
			toggleMenu(false);
			smButton.focus();
		}
	});

	// Add Icons to items with children
	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';
		icon.setAttribute('role', 'button');
		icon.setAttribute('aria-label', 'Toggle submenu');
		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 submenu on click/keyboard
	for (const link of subMenuIcon) {
		link.addEventListener('click', toggleSubmenu, true);
		link.addEventListener('keydown', function(e) {
			if (e.key === 'Enter' || e.key === ' ') {
				e.preventDefault();
				toggleSubmenu.call(this, e);
			}
		}, true);
	}

	function toggleSubmenu(e) {
		const parent = this.parentNode;
		
		// Close other open submenus
		const siblings = parent.parentNode.querySelectorAll('.menu-item-has-children.clicked, .page_item_has_children.clicked');
		for (const sibling of siblings) {
			if (sibling !== parent) {
				sibling.classList.remove('clicked');
			}
		}

		// Toggle current
		if (parent.classList.contains('clicked')) {
			parent.classList.remove('clicked');
		} else {
			parent.classList.add('clicked');
			parent.classList.remove('focus');
		}
	}

	// Focus trap for accessibility
	const focusableElements = smMenu.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])');

	if (focusableElements.length > 0) {
		const firstFocusElement = focusableElements[0];
		const lastFocusElement = focusableElements[focusableElements.length - 1];

		firstFocusElement.addEventListener('keydown', function(e) {
			if (e.key === 'Tab' && e.shiftKey) {
				e.preventDefault();
				lastFocusElement.focus();
			}
		}, true);

		lastFocusElement.addEventListener('keydown', function(e) {
			if (e.key === 'Tab' && !e.shiftKey) {
				e.preventDefault();
				firstFocusElement.focus();
			}
		}, true);
	}

}());
