export class Menu {
	menuContainer: HTMLDivElement = document.querySelector('.ntsh_menubar');
	tabContainer: HTMLDivElement = document.querySelector('.ntsh_tabs');

	constructor() {
		this.registerListeners();

		if (window.location.search.includes('advanced'))
			this.selectTab('advanced');
	}

	selectTab(tabId: string) {
		this.menuContainer
			.querySelectorAll('.ntsh_menubar-item')
			.forEach((item) => {
				if (item.getAttribute('tabid') === tabId) {
					item.classList.add('selected');
				} else {
					item.classList.remove('selected');
				}
			});

		this.tabContainer.querySelectorAll('.ntsh_tab').forEach((tab) => {
			if (tab.getAttribute('tabid') === tabId) {
				tab.classList.add('visible');
			} else {
				tab.classList.remove('visible');
			}
		});
	}

	private registerListeners() {
		this.menuContainer
			.querySelectorAll('.ntsh_menubar-item')
			.forEach((item) => {
				item.addEventListener('click', () => {
					const itemId = item.getAttribute('tabid');
					this.selectTab(itemId);
				});
			});
	}
}