import { MorphComponent, MorphFeature } from 'morphux';
import { Main } from './main';
import { ComponentMenuBar } from 'morphux/dist/Components/MenuBar/Component.MenuBar';

export class MenuBar {
	private _Main: Main;

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

	menubar: ComponentMenuBar;

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

		this.build();

		setTimeout(() => {
			if (localStorage?.getItem('serviceMode') === 'true')
				this.toggleServiceMode(true, true);
		}, 10);
	}

	build() {
		this.menubar = new ComponentMenuBar({
			left: [
				{
					type: 'image',
					url: '/img/morphix_logo_white.png',
				},
				{
					type: 'normal',
					text: 'Dashboard',
					materialIcon: 'dashboard',
					uniqueIdentifier: 'dashboard',
					selected: true,

					click: () => this._Main.TabController.showTab('dashboard'),
				},
				{
					type: 'normal',
					text: 'Calibration',
					uniqueIdentifier: 'calibration',
					materialIcon: 'crop_free',

					click: () =>
						this._Main.TabController.showTab('calibration'),
				},
				{
					type: 'normal',
					text: 'Unity Logs',
					uniqueIdentifier: 'unitylogs',
					materialIcon: 'deployed_code',

					click: () => this._Main.TabController.showTab('unitylogs'),
				},
				{
					type: 'normal',
					text: 'Camera Logs',
					uniqueIdentifier: 'cameralogs',
					materialIcon: 'photo_camera',

					click: () => this._Main.TabController.showTab('cameralogs'),
				},
			],

			right: [
				{
					type: 'normal',
					text: document.body.classList.contains('ntsh_service')
						? 'Exit Service'
						: 'Service Mode',
					uniqueIdentifier: 'serviceMode',
					materialIcon: document.body.classList.contains(
						'ntsh_service'
					)
						? 'logout'
						: 'engineering',

					click: async () => {
						const mobileMenu: HTMLDivElement =
							document.querySelector('.mux_mobilemenu');
						mobileMenu?.click();

						this.toggleServiceMode();
					},
				},
			],
		});
		this.container.innerHTML = '';
		this.container.appendChild(this.menubar.container);
	}

	async toggleServiceMode(
		mode?: boolean,
		skipPin?: boolean
	): Promise<boolean> {
		const newMode =
			mode ?? !document.body.classList.contains('ntsh_service');

		if (newMode) {
			if (skipPin !== true) {
				const servicePin: string = await MorphFeature.Prompt({
					title: 'Service Mode',
					message: 'Enter the service PIN:',
					type: 'number',
					canBeEmpty: false,
					placeholder: '****',
				});
				if (servicePin !== '4252') {
					MorphFeature.Alert({
						title: 'Error',
						message: 'Incorrect PIN provided.',
					});
					return false;
				}
			}

			document.body.classList.add('ntsh_service');

			localStorage.setItem('serviceMode', 'true');

			MorphFeature.Notification({
				level: 'success',
				message: 'Service mode activated.',
			});
		} else {
			document.body.classList.remove('ntsh_service');

			this._Main.TabController.showTab('dashboard');

			localStorage.setItem('serviceMode', 'false');

			MorphFeature.Notification({
				level: 'success',
				message: 'Service mode deactivated.',
			});
		}

		this.build();
		return true;
	}
}