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

export class Checklist {
	private _Main: Main;

	Rows = {
		CAMERAPC: document.querySelector(
			`.ntsh-checklist-row[status="CAMERAPC"]`,
		) as HTMLDivElement,
		CAMERAPROCESS: document.querySelector(
			`.ntsh-checklist-row[status="CAMERAPROCESS"]`,
		) as HTMLDivElement,
		CAMERAUNITYSTREAM: document.querySelector(
			`.ntsh-checklist-row[status="CAMERAUNITYSTREAM"]`,
		) as HTMLDivElement,
		UNITYBUILD: document.querySelector(
			`.ntsh-checklist-row[status="UNITYBUILD"]`,
		) as HTMLDivElement,
		REPLAYFUNCTION: document.querySelector(
			`.ntsh-checklist-row[status="REPLAYFUNCTION"]`,
		) as HTMLDivElement,
	};
	FullReboot: HTMLDivElement = document.querySelector(
		'.ntsh-fullreboot-button',
	);

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

		this.registerListeners();
	}

	update(status: Status) {
		this.updateRow(this.Rows.CAMERAPC, status.CAMERAPC);
		this.updateRow(this.Rows.CAMERAPROCESS, status.CAMERAPROCESS);
		this.updateRow(this.Rows.CAMERAUNITYSTREAM, status.CAMERAUNITYSTREAM);
		this.updateRow(this.Rows.UNITYBUILD, status.UNITYBUILD);
		this.updateRow(this.Rows.REPLAYFUNCTION, status.REPLAYFUNCTION);
	}

	updateRow(row: HTMLDivElement, state: StateEntry) {
		const status: HTMLDivElement = row.querySelector(
			'.ntsh-checklist-row-status',
		);
		const message: HTMLDivElement = row.querySelector('p');

		const startButton: HTMLDivElement = row.querySelector(
			'.ntsh-checklist-row-button.start',
		);
		const stopButton: HTMLDivElement = row.querySelector(
			'.ntsh-checklist-row-button.stop',
		);
		const rebootButton: HTMLDivElement = row.querySelector(
			'.ntsh-checklist-row-button.reboot',
		);

		status.classList.remove('RED', 'GREEN', 'YELLOW', 'GRAY');
		status.classList.add(state.state);

		message.innerText = state.message;

		startButton.style.display = state.buttons?.start ? 'block' : 'none';
		stopButton.style.display = state.buttons?.stop ? 'block' : 'none';
		rebootButton.style.display = state.buttons?.reboot ? 'block' : 'none';
	}

	private registerListeners() {
		this.FullReboot.onclick = () => {
			MorphFeature.Confirm(
				{
					title: 'Full Reboot',
					message: 'Are you sure you want to perform a full reboot?',
				},
				(state) => {
					if (!state) return;
					this._Main.socket.emit('status', 'fullreboot');
				},
			);
		};

		for (const key in this.Rows) {
			const row = this.Rows[key];

			const startButton: HTMLDivElement = row.querySelector(
				'.ntsh-checklist-row-button.start',
			);
			startButton.onclick = () =>
				MorphFeature.Confirm(
					{
						title: 'Start',
						message: 'Are you sure you want to start?',
					},
					(state) => {
						if (!state) return;
						this._Main.socket.emit('status', 'start', key);
					},
				);

			const stopButton: HTMLDivElement = row.querySelector(
				'.ntsh-checklist-row-button.stop',
			);
			stopButton.onclick = () =>
				MorphFeature.Confirm(
					{
						title: 'Stop',
						message: 'Are you sure you want to stop?',
					},
					(state) => {
						if (!state) return;
						this._Main.socket.emit('status', 'stop', key);
					},
				);

			const rebootButton: HTMLDivElement = row.querySelector(
				'.ntsh-checklist-row-button.reboot',
			);
			rebootButton.onclick = () =>
				MorphFeature.Confirm(
					{
						title: 'Reboot',
						message: 'Are you sure you want to reboot?',
					},
					(state) => {
						if (!state) return;
						this._Main.socket.emit('status', 'reboot', key);
					},
				);
		}
	}
}

interface Status {
	CAMERAPC: StateEntry;
	CAMERAPROCESS: StateEntry;
	CAMERAUNITYSTREAM: StateEntry;
	UNITYBUILD: StateEntry;
	REPLAYFUNCTION: StateEntry;
}

interface StateEntry {
	state: 'GREEN' | 'RED' | 'YELLOW' | 'GRAY';
	message: string;
	buttons?: { reboot?: boolean; start?: boolean; stop?: boolean };
}