class NavigationHandler extends UIHandler {
	constructor() {
		super();

		this.initializeHandlers({
			menuToggle: {
				forEach: true,
				click: (e) => this.toggleMenu(e)
			},
			submenuToggles: {
				forEach: true,
				handler: (toggle) => {
					toggle._boundHandler = this.toggleSubmenu.bind(this);
					toggle.addEventListener('click', toggle._boundHandler);
				},
				click: (e) => this.toggleSubmenu(e)
			}
		});

		this.bindElements();
		this.bindEvents();
	}

	bindElements() {
		this.elements = {
			mobileNav: document.querySelectorAll('nav.mobile, nav:has(.has-submenu)'),
			menuToggle: document.querySelectorAll('button.toggle.main'),
			submenus: document.querySelectorAll('.has-submenu'),
			submenuToggles: document.querySelectorAll('button.toggle:not(.main)')
		};

	}

	bindEvents() {
		super.bindEvents();
		this.bindComponentEvents();
	}

	toggleMenu(event) {
		event?.preventDefault();

		const { mobileNav, menuToggle } = this.elements;
		const isExpanded = !this.isComponentActive('menu');
		const firstLink = event.target.closest('nav').querySelector('a');

		this.setComponentState('menu', isExpanded, {
			element: event.target.closest('nav'),
			toggle: event.target.closest('.toggle'),
			focusElement: isExpanded ? firstLink : menuToggle,
			cleanup: () => {
				// Close any open submenus when closing menu
				if (!isExpanded) {
					this.elements.submenus?.forEach(submenu => {
						if (this.isComponentActive(submenu.id || 'submenu')) {
							this.closeSubmenu(submenu);
						}
					});
				}
			}
		});
	}

	toggleSubmenu(event) {
		event?.preventDefault();
		const toggle = event.currentTarget;
		const submenuParent = toggle.closest('.has-submenu');
		const submenuId = submenuParent.id || 'submenu';
		const isExpanded = !this.isComponentActive(submenuId);
		const firstSubmenuLink = submenuParent?.querySelector('.submenu a');

		this.setComponentState(submenuId, isExpanded, {
			element: submenuParent,
			toggle: toggle,
			focusElement: isExpanded ? firstSubmenuLink : toggle
		});
	}

	closeMenu(mobileNav) {
		let menuToggle = mobileNav.querySelector('.toggle.main');
		// Close main menu
		this.setComponentState('menu', false, {
			element: mobileNav,
			toggle: menuToggle,
			focusElement: menuToggle
		});
		let submenus = mobileNav.querySelectorAll('.has-submenu');
		// Close any open submenus
		submenus?.forEach(submenu => {
			const toggle = submenu.querySelector('button.toggle');
			const submenuId = submenu.id || 'submenu';
			if (this.isComponentActive(submenuId)) {
				this.setComponentState(submenuId, false, {
					element: submenu,
					toggle: toggle
				});
			}
		});
	}

	closeSubmenu(submenu) {
		const toggle = submenu.querySelector('button.toggle');
		const submenuId = submenu.id || 'submenu';

		this.setComponentState(submenuId, false, {
			element: submenu,
			toggle: toggle,
			focusElement: toggle
		});
	}

	handleOutsideClick(event) {
		if (!event.target.closest('nav')) {
			this.closeOpenItems();
		}
	}

	handleEscapeKey(event) {
		if (event.key !== 'Escape') return;
		this.closeOpenItems();

		event.preventDefault();
	}

	closeOpenItems(){
		const { mobileNav, submenus } = this.elements;
		const openSubmenu = Array.from(submenus || [])
			.find(submenu => submenu.classList.contains('open'));

		const openMenu = Array.from(mobileNav || [])
			.find(menu => menu.classList.contains('open'));

		if (openSubmenu) {
			this.closeSubmenu(openSubmenu);
		}
		if (openMenu) {
			this.closeMenu(openMenu);
		}
	}

	// Add cleanup method
	cleanup() {
		super.cleanup();
		this.cleanupComponentEvents();
	}
}


// Initialize on DOM load
document.addEventListener('DOMContentLoaded', () => {
	const navigation = new NavigationHandler();
});