import { ce, 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;

	supportNumber: string;

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

		this.build();

		this._Main.socket.on('supportNumber', (number: string) => {
			this.supportNumber = number;
		});

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

	build() {
		this.menubar = new ComponentMenuBar({
			mobile: {
				left: [
					{
						type: 'icon',
						text: 'Restart',
						materialIcon: 'restart_alt',
						uniqueIdentifier: 'restart_installation',

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

							this.restartInstallation();
						},
					},
				],
				right: [
					{
						type: 'icon',
						text: 'Support',
						materialIcon: 'call_quality',
						uniqueIdentifier: 'call_support',
						click: () => this.showSupport(),
					},
				],
			},
			left: [
				{
					type: 'normal',
					text: 'Restart',
					materialIcon: 'restart_alt',
					uniqueIdentifier: 'restart_installation',

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

						this.restartInstallation();
					},
				},
				{
					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: 'icon',
					text: 'Support',
					materialIcon: 'call_quality',
					uniqueIdentifier: 'call_support',
					click: () => this.showSupport(),
				},
				{
					type: document.body.classList.contains('ntsh_service')
						? 'normal'
						: 'icon',
					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 showSupport() {
		const dialog = new MorphComponent.Dialog({
			title: 'Contact Support',
			width: 'medium',
			height: 'auto',
			okButtonVisible: false,
			cancelButtonVisible: false,
		});

		this.supportNumber.slice();
		const callAnchor = ce(
			'a',
			'ntsh_callanchor',
			{ href: `tel:${this.supportNumber}` },
			`+${this.supportNumber}`
		);
		dialog.content.appendChild(callAnchor);

		setTimeout(() => callAnchor.click(), 100);
	}

	async restartInstallation() {
		const confirmed = await MorphFeature.Confirm({
			title: 'Restart Installation',
			message: 'Are you sure you want to restart the installation?',
		});
		if (!confirmed) return;

		MorphFeature.Loader({
			active: true,
			message: 'Restarting installation...',
		});
		this._Main.socket.emit(
			'restartInstallation',
			(response: { succeed: boolean; message?: string }) => {
				MorphFeature.Loader({ active: false });
				if (!response.succeed)
					return MorphFeature.Alert({
						title: 'Error',
						message: response.message,
					});
			}
		);
	}

	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;
	}
}