import { Main } from './main';

export class Calibration {
	private _Main: Main;

	container: HTMLDivElement = document.querySelector('.ntsh_calibration');
	image: HTMLImageElement = this.container.querySelector('img');
	fullscreenButton: HTMLDivElement = this.container.querySelector(
		'.ntsh_calibration-fullscreen'
	);

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

		this.registerListeners();
	}

	private fetchClock: NodeJS.Timeout;
	startFetchClock() {
		this.image.src = `/calibrationImage?t=${Date.now()}`;
		this.fetchClock = setInterval(() => {
			this.image.src = `/calibrationImage?t=${Date.now()}`;
		}, 1000);
	}

	stopFetchClock() {
		clearInterval(this.fetchClock);
	}

	private registerListeners() {
		this._Main.TabController.registerListener('calibration', (visible) => {
			if (visible) this.startFetchClock();
			else this.stopFetchClock();
		});

		this.fullscreenButton.addEventListener('click', () => {
			this.image.requestFullscreen();
		});
	}
}