<script>
	import {
		CloudUploadIcon,
		HandIcon,
		MapIcon,
		PackageMinusIcon,
		PackagePlusIcon,
		PackageXIcon,
		RefreshCcwIcon,
		SpeechIcon,
		ToggleLeftIcon,
	} from "@lucide/svelte";
	import SidebarHeader from "../SidebarHeader.svelte";
	import SettingsButton from "./SettingsButton.svelte";
	import say from "$lib/services/navigation/TTS";
	import { downloadPMTiles } from "$lib/services/OfflineTiles";
	import { getDeveloperToggle } from "./developer.svelte";
	import { view } from "../../view.svelte";
	import { m } from "$lang/messages";
	import { setOnboardingState } from "$lib/onboarding.svelte";
	import {
		getDB,
		stores,
		syncStores,
		updateStore,
	} from "$lib/services/stores.svelte";

	const dev = getDeveloperToggle();

	const locationStores = stores("location");
</script>

<SidebarHeader>{m["sidebar.developer.header"]()}</SidebarHeader>

<div id="sections">
	<section>
		<h2>Test</h2>
		<SettingsButton
			icon={SpeechIcon}
			text="Test TTS"
			onclick={async () => {
				await say("Test");
			}}
		/>
		<SettingsButton
			icon={MapIcon}
			disabled={!window.__TAURI__}
			text="Download tiles from URL{window.__TAURI__ ? '' : ' (Unavailable)'}"
			onclick={async () => {
				const name = prompt("Name?");
				if (!name) return;
				const url = prompt("URL?");
				if (!url) return;
				await downloadPMTiles(url, name);
			}}
		/>
	</section>

	<section>
		<h2>Open</h2>
		<SettingsButton icon={HandIcon} text="Start onboarding" view="onboarding" />
		<SettingsButton
			icon={HandIcon}
			text="Reset onboarding"
			onclick={() => {
				setOnboardingState("start");
			}}
		/>
		<SettingsButton
			icon={RefreshCcwIcon}
			text="Reload"
			onclick={() => {
				location.reload();
			}}
		/>
	</section>

	<section>
		<h2>Stores</h2>
		<SettingsButton
			icon={CloudUploadIcon}
			text="Sync Stores"
			onclick={async () => {
				syncStores();
			}}
		/>
		<SettingsButton
			icon={PackagePlusIcon}
			text="Update Store"
			onclick={async () => {
				const name = prompt("Store Name?");
				if (!name) return;
				const type = prompt("Store Type? (route, location, vehicle)");
				if (type !== "route" && type !== "location" && type !== "vehicle") {
					alert("Invalid type");
					return;
				}
				const data = prompt("Data? (JSON)");
				if (!data) return;
				await updateStore({ name, type }, JSON.parse(data));
			}}
		/>
		<SettingsButton
			icon={PackageMinusIcon}
			text="Delete Store"
			onclick={async () => {
				const name = prompt("Store Name?");
				if (!name) return;
				const type = prompt("Store Type? (route, location, vehicle)");
				if (type !== "route" && type !== "location" && type !== "vehicle") {
					alert("Invalid type");
					return;
				}
				await updateStore({ name, type }, null);
			}}
		/>
		<SettingsButton
			icon={PackageXIcon}
			text="Nuke all Stores"
			onclick={async () => {
				if (!confirm("Are you sure?")) return;
				const db = await getDB();
				const tx = db.transaction(["stores", "changes"], "readwrite");
				await tx.objectStore("stores").clear();
				await tx.objectStore("changes").clear();
				await tx.done;
				alert("Nuked all stores");
			}}
		/>
		<span>LOCATION STORES: {JSON.stringify(locationStores.current)}</span>
	</section>

	<section>
		<h2>Other</h2>
		<SettingsButton
			icon={ToggleLeftIcon}
			text="Disable Developer Options"
			onclick={async () => {
				dev.current = "false";
				view.back();
			}}
		/>
	</section>
</div>

<style>
	section {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	#sections {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
</style>
