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

import App from "./App";
import { loadDataFromDB } from "./offline";

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 {}
}

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(
		() => (
			<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.
						<button
							style={{ margin: "auto" }}
							onClick={async () => {
								localStorage.clear();
								if ("serviceWorker" in navigator) {
									caches.keys().then((cacheNames) => {
										for (const cacheName of cacheNames) {
											caches.delete(cacheName);
										}
									});
								}
								indexedDB.deleteDatabase("music-files").onsuccess = () => {
									location.hash = "";
									location.reload();
								};
							}}
						>
							Reset
						</button>
					</div>
				</dialog>
			</div>
		),
		root,
	);
} else {
	if (!version) {
		try {
			localStorage.setItem("app-version", currentVersion);
		} catch {}
	}

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