/**
 * Mobile Menu Script for AI Blog - Fixed Version
 *
 * 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');

	if(!smMenu){
		return;
	}

	const smOpen = smMenu.querySelector('.mopen');
	const smClose = smMenu.querySelector('.mclose');
	smClose.style.display = 'none';

	// button click event
	smButton.addEventListener('click', function(){
		smMenu.classList.toggle('menu-active');
		
		if(smButton.getAttribute('aria-expanded') === 'true'){
			smButton.setAttribute('aria-expanded', 'false');
			smClose.style.display = 'none';
			smOpen.style.display = 'block';
		} else {
			smButton.setAttribute('aria-expanded','true');
			smClose.style.display = 'block';
			smOpen.style.display = 'none';
		}
	}); // Click event end

	// set outside the menu area 
	document.addEventListener('click',function(e){
		const isInsideMenu = smMenu.contains(e.target);
		const isMenuButton = smButton.contains(e.target);

		if(!isInsideMenu && !isMenuButton){
			smMenu.classList.remove('menu-active');
			smButton.setAttribute('aria-expanded','false');
			smClose.style.display = 'none';
			smOpen.style.display = 'block';
		}
	});

	// add Icon to menu 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';
		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');
	}

	// Add click and focus events to submenu icons
	for (const link of subMenuIcon) {
		link.addEventListener('click', toggleClick, true);
		link.addEventListener('focus', toggleFocus, true);
		link.addEventListener('keydown', function(e) {
			if (e.key === 'Enter' || e.key === ' ') {
				e.preventDefault();
				toggleClick.call(this, e);
			}
		});
	}

	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');
		}
	}

	// Enhanced keyboard navigation
	const focusableInNav = smMenu.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])');

	if (focusableInNav.length > 0) {
		let firstFocusElement = focusableInNav[0];
		let 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();
			}
		}
	}

	// Close menu with Escape key
	document.addEventListener('keydown', function(e) {
		if (e.key === 'Escape' && smMenu.classList.contains('menu-active')) {
			smMenu.classList.remove('menu-active');
			smButton.setAttribute('aria-expanded','false');
			smClose.style.display = 'none';
			smOpen.style.display = 'block';
			smButton.focus();
		}
	});

	// Handle window resize
	window.addEventListener('resize', function() {
		if (window.innerWidth > 991 && smMenu.classList.contains('menu-active')) {
			smMenu.classList.remove('menu-active');
			smButton.setAttribute('aria-expanded','false');
			smClose.style.display = 'none';
			smOpen.style.display = 'block';
		}
	});

}());
