const localStorageKey = "theme";

const isDark = () => {
	if (localStorage.getItem(localStorageKey) === "dark") return true;
	if (localStorage.getItem(localStorageKey) === "light") return false;
	return window.matchMedia("(prefers-color-scheme: dark)").matches;
};

const setupThemeToggle = () => {
	toggleVisibility = (dark) => {
		const themeToggleDarkIcon = document.getElementById(
			"theme-toggle-dark-icon",
		);
		const themeToggleLightIcon = document.getElementById(
			"theme-toggle-light-icon",
		);
		if (themeToggleDarkIcon == null || themeToggleLightIcon == null) return;
		const show = dark ? themeToggleDarkIcon : themeToggleLightIcon;
		const hide = dark ? themeToggleLightIcon : themeToggleDarkIcon;
		show.classList.remove("hidden", "text-transparent");
		hide.classList.add("hidden", "text-transparent");
		if (dark) {
			document.documentElement.classList.add("dark");
		} else {
			document.documentElement.classList.remove("dark");
		}
		try {
			localStorage.setItem(localStorageKey, dark ? "dark" : "light");
		} catch (_err) { }
	};
	toggleVisibility(isDark());
	document
		.getElementById("theme-toggle")
		.addEventListener("click", function() {
			toggleVisibility(!isDark());
		});
};

const darkModeHook = {
	mounted() {
		setupThemeToggle();
	},
	updated() { },
};

export default darkModeHook;