<script lang="ts">
	import maplibregl from 'maplibre-gl';
	import ToolbarProductSelector from '$lib/ToolbarProductSelector.svelte';
	import { Button } from '$lib/components/ui/button';
	import { onMount } from 'svelte';
	import type { LayerList } from './layerList';

	interface Props {
		categories: LayerList;
	}
	let { categories }: Props = $props();

	const id = $props.id();
	let map: maplibregl.Map | null = $state(null);

	let selectedPrimaryLayer: string | null = $state(null);
	let pickingSiteForCategory: boolean = $state(false);
	let selectedSite: string | null = $state(null);

	onMount(() => {
		map = new maplibregl.Map({
			container: id,
			style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
			center: [0, 0],
			zoom: 1
		});
		map.on('load', async () => {
			if (!map) return;
			const img = document.createElement('img');
			img.src = '/radar-rect-gray.svg';
			img.onload = () => {
				map?.addImage('radar-rect-gray', img);
			};
			map.addSource('kcys-bref-0.5', {
			    type: 'raster',
			    tiles: [
			        'http://localhost:3000/nexrad/base_reflectivity_halfdegree/KCYS/{z}/{x}/{y}@2x.png'
			    ],
			    'tileSize': 512
			    });
			    map.addLayer({
			    id: 'kcys',
			    type: 'raster',
			    source: 'kcys-bref-0.5'
			    });
		});
	});
</script>

<div class="flex flex-1 flex-col">
	<div class="flex flex-row items-center px-2">
		{#if map}
			<!-- left -->
			<div class="flex flex-1 grow flex-row justify-start">
				<Button variant="ghost"><b>1</b></Button>
			</div>

			<!-- center -->
			<div class="flex flex-1 grow flex-row justify-center">
				<ToolbarProductSelector
					bind:pickingSiteForCategory
					bind:selectedSite
					bind:selectedPrimaryLayer
					{categories}
					{map}
				/>
			</div>

			<div class="flex flex-1 grow flex-row justify-end gap-1"></div>
		{/if}
	</div>
	<div class="map flex-1" {id}></div>
</div>
