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


(function(){
	// select all variable
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';
		// Return focus to the menu button
		smButton.focus();
	}else{
		smButton.setAttribute('aria-expanded','true');
		smClose.style.display = 'block';
		smOpen.style.display = 'none';
		// Focus on the first menu item when menu opens
		const firstMenuItem = smMenu.querySelector('a, button');
		if (firstMenuItem) {
			firstMenuItem.focus();
		}
	}

  }); // Click event end

  // Handle Enter and Space keys to toggle menu
  smButton.addEventListener('keydown', function(e) {
	if (e.key === 'Enter' || e.key === ' ') {
		e.preventDefault();
		smButton.click();
	}
  });

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

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

});

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

// add Icon has Children item

//const linkHasSub = smMenu.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
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('aria-hidden', 'true');
	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');
	iconset.setAttribute('role', 'button');
	iconset.setAttribute('aria-expanded', 'false');
	iconset.setAttribute('aria-label', 'Toggle submenu');
	
}

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

	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);
			}
			// Arrow keys for navigation
			if (e.key === 'ArrowRight') {
				e.preventDefault();
				const parentItem = this.parentNode;
				if (!parentItem.classList.contains('focus') && !parentItem.classList.contains('clicked')) {
					toggleClick.call(this, e);
				}
				// Focus on the first submenu item
				const firstSubItem = parentItem.querySelector('.sub-menu a');
				if (firstSubItem) {
					firstSubItem.focus();
				}
			}
			if (e.key === 'ArrowLeft') {
				e.preventDefault();
				const parentItem = this.parentNode;
				if (parentItem.classList.contains('focus') || parentItem.classList.contains('clicked')) {
					toggleClick.call(this, e);
				}
			}
		}, true );
	//	link.addEventListener( 'blur', toggleblur, true );
	}

	function toggleFocus(e){
		
		if( ! this.parentNode.classList.contains('focus')){
			this.parentNode.classList.add('focus');
			this.parentNode.classList.remove('clicked');
			this.setAttribute('aria-expanded', 'true');
		}

	}
	function toggleblur(e){
		const firstLiA = smMenu.querySelctorAll('#wsm-menu >li a');

		const firstLiaBlur = firstLiA.contains(e.target);
		console.log(firstLiA);
		
		if(firstLiaBlur){

			this.parentNode.classList.remove('focus');
		}else{
			this.parentNode.classList.add('focus');
		}
		

	}
	function toggleClick(e){
		
		if( this.parentNode.classList.contains('clicked')){
			this.parentNode.classList.remove('clicked');
			this.setAttribute('aria-expanded', 'false');
		}else{
			this.parentNode.classList.add('clicked');
			this.parentNode.classList.remove('focus');
			this.setAttribute('aria-expanded', 'true');
		}

	}

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


	let firstFocusElement = focusableInNav[0];
	let lestFocusElement = focusableInNav[focusableInNav.length - 1];
	
	if (firstFocusElement && lestFocusElement) {
		firstFocusElement.addEventListener( 'keydown', moveFocusToBottom, true );
		lestFocusElement.addEventListener( 'keydown', moveFocusToTop, true );
	}

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

}())