const themeSelector = document.querySelector('#theme-selector');
if (themeSelector) {
	themeSelector.addEventListener('change', (e: Event) => {
		e.preventDefault();
		e.stopPropagation();
		const key = (themeSelector as HTMLInputElement).value;
		const htmlElement = document.querySelector('html');
		switch (key) {
			case 'light':
				removeThemes(htmlElement);
				htmlElement.classList.add('theme-light');
				break;
			case 'dark':
				removeThemes(htmlElement);
				htmlElement.classList.add('theme-dark');
				break;
			case 'high-contrast':
				removeThemes(htmlElement);
				htmlElement.classList.add('theme-high-contrast');
				break;
			default:
				break;
		}
	});
}

function removeThemes(htmlElement: HTMLElement) {
	htmlElement.classList.remove('theme-light');
	htmlElement.classList.remove('theme-dark');
	htmlElement.classList.remove('theme-high-contrast');
}
