import { MorphFeature } from 'morphux';
import { Main } from './main';

export type Tabs = 'dashboard' | 'calibration' | 'cameralogs' | 'unitylogs';
export class TabController {
	private _Main: Main;

	container: HTMLDivElement = document.querySelector('.ntsh_tabs');

	currentTabId: Tabs;

	constructor(main: Main) {
		this._Main = main;

		this.registerNavigationListener();
	}

	private tabListeners: Map<Tabs, (visible: boolean) => void> = new Map();
	registerListener(tabId: Tabs, callback: (visible: boolean) => void) {
		if (this.tabListeners.has(tabId))
			throw new Error(
				`Listener for tab id ${tabId} has already been registered!`
			);

		this.tabListeners.set(tabId, callback);
		callback(this.currentTabId == tabId);
	}

	async showTab(tabId: Tabs) {
		if (this.currentTabId == tabId) return;

		if (
			tabId !== 'dashboard' &&
			!document.body.classList.contains('ntsh_service')
		) {
			const confirmed = await MorphFeature.Confirm({
				title: 'Service Mode Required',
				message: `You need to be in service mode to access tab ${tabId}, switch to Service Mode now?`,
			});
			if (!confirmed) return this.showTab('dashboard');

			const succeed = await this._Main.MenuBar.toggleServiceMode(true);
			if (!succeed) return this.showTab('dashboard');
		}

		this._Main.MenuBar.menubar.setSelected(tabId);

		if (this.tabListeners.has(this.currentTabId))
			this.tabListeners.get(this.currentTabId)(false);
		if (this.tabListeners.has(tabId)) this.tabListeners.get(tabId)(true);
		this.currentTabId = tabId;

		this.container
			.querySelectorAll('.ntsh_tab')
			.forEach((tab) => tab.classList.remove('ntsh_tab-visible'));

		this.container
			.querySelector(`.ntsh_tab[tabid="${tabId}"]`)
			.classList.add('ntsh_tab-visible');

		window.history.pushState(
			{ tab: tabId },
			'',
			`/${tabId}${window.location.search}`
		);

		var tabName = {
			dashboard: 'Dashboard',
			calibration: 'Calibration',
			cameralogs: 'Camera Logs',
			unitylogs: 'Unity Logs',
		}[tabId];
		document.title = `NTSH Control - ${tabName}`;
	}

	private registerNavigationListener() {
		window.addEventListener('popstate', (event) => {
			const state = event.state;
			if (state && state.tab) this.showTab(state.tab);
		});

		var startTab = window.location.pathname
			.replace('/', '')
			.split('/')
			.shift() as Tabs;
		this.showTab(startTab.length > 0 ? startTab : 'dashboard');
	}
}