<script lang="ts">
	import { downloadPMTiles, getRemoteList } from "$lib/services/OfflineTiles";
	import { DownloadCloudIcon } from "@lucide/svelte";
	import SettingsButton from "./SettingsButton.svelte";
	import SidebarHeader from "../SidebarHeader.svelte";
	import { m } from "$lang/messages";

	let progresses: Record<string, number> = $state({});
</script>

<SidebarHeader>{m["sidebar.offline-maps.header"]()}</SidebarHeader>

{#await getRemoteList()}
	<p>{m.loading()}</p>
{:then list}
	<div style="display: flex; flex-direction: column; gap: 0.5rem;">
		{#if list.length === 0}
			<p>{m["sidebar.offline-maps.not-available"]()}</p>
		{/if}

		{#if !window.__TAURI__}
			<p>{m["sidebar.offline-maps.only-mobile"]()}</p>
		{/if}

		{#each list as item, _index (item.file)}
			<SettingsButton
				disabled={!window.__TAURI__}
				icon={DownloadCloudIcon}
				text={item.name}
				progress={progresses[item.file] ?? -1}
				onclick={async () => {
					await downloadPMTiles(
						"https://trafficcue-tiles.picoscratch.de/" + item.file,
						item.name.includes("World") ? "world" : "tiles",
						(progress, total) => {
							progresses[item.file] = (progress / total) * 100;
						},
					);
					alert(m["sidebar.offline-maps.downloaded"]({ name: item.name }));
					location.reload();
				}}
			/>
		{/each}
	</div>
{/await}
