<script lang="ts">
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Button from '$lib/components/ui/form-elements/Button.svelte';

	import { prefs } from '$lib/preferences.svelte';

	import { fade } from 'svelte/transition';
	import { flip } from 'svelte/animate';

	import { nearestStationsState } from '$lib/geohash.svelte';

	const flipDuration = 300;
</script>

<BaseCard header={'Nearby Stations'}>
	<div class="card-content">
		{#if !prefs.current.NearToMe}
			<Button onclick={() => prefs.toggleNearToMe(true)}>Enable Location</Button>
		{:else if nearestStationsState.error && nearestStationsState.list.length === 0}
			<p class="msg">{nearestStationsState.error}</p>
		{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}
			<p class="msg">Locating stations...</p>
		{:else}
			<div class="stations-flex">
				{#each nearestStationsState.list as station (station.c)}
					<div
						class="btn-container"
						animate:flip={{ duration: flipDuration }}
						in:fade|global={{ duration: 200 }}
					>
						<Button href={`/board?loc=${station.c}`}
							><span class="stn-name">{station.n}</span></Button
						>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</BaseCard>

<style>
	.card-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 90%;
		min-height: 98px;
		margin: auto;
		padding: 10px 0 0 0;
	}

	.stations-flex {
		display: flex;
		flex-wrap: wrap;
		gap: 0.1rem 0.5rem;
		justify-content: center;
		align-items: flex-start;
	}

	.btn-container {
		display: block;
		width: fit-content;
		will-change: transform;
	}

	.msg {
		font-size: 1.1rem;
		font-weight: 600;
		color: var(--color-title);
	}

	.stn-name {
		text-transform: capitalize;
	}
</style>
