/* @refresh reload */
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
import "./style.css";
import "./components/Dialog.css";

import { registerSW } from "virtual:pwa-register";
import App from "./App";
import { initCapabilities } from "./capabilities";
import { clearLocalData, loadDataFromDB } from "./offline";
import { toast } from "./utils";

const root = document.getElementById("root");
if (!(root instanceof HTMLElement)) {
	throw new Error(
		"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
	);
}

navigator?.storage?.persist()?.catch(() => {});

function hasTouch() {
	return (
		"ontouchstart" in document.documentElement ||
		navigator.maxTouchPoints > 0 ||
		("msMaxTouchPoints" in navigator &&
			typeof navigator.msMaxTouchPoints === "number" &&
			navigator.msMaxTouchPoints > 0)
	);
}

if (hasTouch()) {
	// remove all the :hover stylesheets
	try {
		// prevent exception on browsers not supporting DOM styleSheets properly
		for (const si in document.styleSheets) {
			const styleSheet = document.styleSheets[si];
			if (!styleSheet.cssRules) continue;

			for (let ri = styleSheet.cssRules.length - 1; ri >= 0; ri--) {
				const rule = styleSheet.cssRules[ri];
				if (!("selectorText" in rule) || typeof rule.selectorText !== "string" || !rule.selectorText) continue;

				if (rule.selectorText.match(":hover")) {
					styleSheet.deleteRule(ri);
				}
			}
		}
	} catch {}
}

function ResetDialog() {
	const [error, setError] = createSignal<string>();
	const [resetting, setResetting] = createSignal(false);

	async function reset() {
		setResetting(true);
		setError(undefined);
		const failure = await clearLocalData().catch((e) => e?.toString() ?? "Unknown error");
		if (failure) {
			setError(failure);
			setResetting(false);
			return;
		}
		location.hash = "";
		location.reload();
	}

	return (
		<div style={{ display: "flex", height: "100%", "align-items": "center" }}>
			<dialog open>
				<div>
					Your local version of this application is not compatible with the newly loaded one, click "Reset" to delete
					all stored settings, files and cached and refresh the page.
					{error() && <div style={{ color: "rgb(255, 24, 24)" }}>{error()}</div>}
					<button style={{ margin: "auto" }} disabled={resetting()} onClick={reset}>
						{resetting() ? "Resetting..." : "Reset"}
					</button>
				</div>
			</dialog>
		</div>
	);
}

const currentVersion = "1";
const version = localStorage.getItem("app-version");
if (version && version !== currentVersion) {
	//TODO: add a way to at least export playlists before resetting
	root.innerHTML = "";
	render(() => <ResetDialog />, root);
} else {
	if (!version) {
		try {
			localStorage.setItem("app-version", currentVersion);
		} catch {}
	}

	//the auto-injected registration only ever checks on a cold navigation, which for an installed
	//player that stays open for days means new deploys are never picked up
	const updateCheckInterval = 60 * 60 * 1000;
	registerSW({
		immediate: true,
		onRegisteredSW: (_swScriptUrl, registration) => {
			if (!registration) return;
			setInterval(() => {
				if (navigator.onLine) registration.update().catch(() => {});
			}, updateCheckInterval);
		},
		//replaces the default automatic reload, which would cut off playback mid-track
		onNeedReload: () => toast("A new version was installed, reload the page to use it", "info"),
	});

	Promise.all([loadDataFromDB(), initCapabilities()])
		.then(() => {
			root.innerHTML = "";
			render(() => <App />, root);
		})
		.catch((e) => {
			root.innerHTML = e.toString();
			console.error(e);
		});
}