<script lang="ts">
	import { m } from "$lang/messages";
	import Button from "$lib/components/ui/button/button.svelte";
	import { circInOut } from "svelte/easing";
	import { fly } from "svelte/transition";
	import { map, pin } from "../map.svelte";
	import { MapPinIcon } from "@lucide/svelte";
	import { stores } from "$lib/services/stores.svelte";
	import { ICONS, type Location } from "$lib/saved.svelte";

	const locations = stores<Location>("location");

	function getName(name: string) {
		if(name == "home") {
			return m["saved.home"]();
		} else if(name == "work") {
			return m["saved.work"]();
		} else if(name == "school") {
			return m["saved.school"]();
		}
		return name;
	}
</script>
<div
	id="saved"
	class="mt-2 mb-2"
	in:fly={{ y: 20, duration: 200, easing: circInOut }}
>
	{#each locations.current as location (location.data.lat + "-" + location.data.lng)}
		<Button
			variant="secondary"
			class="flex-1"
			onclick={() => {
				const { lat, lng } = location.data;
				pin.dropPin(lat, lng);
				pin.showInfo();
				map.value?.flyTo({
					center: [lng, lat],
					zoom: 19,
				});
			}}>
			{@const Icon = ICONS[location.data.icon ?? "pin"] ?? MapPinIcon}
			<Icon />
			{getName(location.data.name)}
		</Button>
	{/each}
</div>

<style>
	#saved {
		display: flex;
		gap: 0.5rem;
		/* justify-content: space-evenly; */
		width: 100%;
		max-width: 100%;
	}
</style>