<script lang="ts">
	import Map from '$lib/map/Map.svelte';
	import type { MenuRegistry, Mode } from '$lib/menubar/buttonlib';
	import ButtonBar from '$lib/menubar/ButtonBar.svelte';
	import type { BaseLayers, DataLayers, MutexLayerSet, OverlayLayerSet } from '$lib/map/layer';
	import type { View } from '$lib/map';
	import type { Map as LMap } from 'leaflet';
	import { syncMaps } from '$lib/map/sync.svelte.js';
	import {strToColor} from "$lib/color";

	let map1: LMap | null = $state(null);
	let map2: LMap | null = $state(null);
	let map3: LMap | null = $state(null);
	let map4: LMap | null = $state(null);

	let view: View = $state('one');

	$effect(() => {
		syncMaps(view, map1, map2, map3, map4);
	});

	let pane: 'map1' | 'map2' | 'map3' | 'map4' = $state('map1');

	let baseLayer: MutexLayerSet<BaseLayers> = $state({
		map1: 'osm',
		map2: 'osm',
		map3: 'osm',
		map4: 'osm'
	});
	let dataLayer: MutexLayerSet<DataLayers | null> = $state({
		map1: null,
		map2: null,
		map3: null,
		map4: null
	});
	let overlayLayers: OverlayLayerSet<string> = $state({
		map1: [],
		map2: [],
		map3: [],
		map4: []
	});

	let mode: Mode = $state('global');
	let registry: MenuRegistry = $derived({
		global: [
			{
				display: 'view',
				keyboard: 'v',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'view';
				}
			},
			{
				display: 'pane',
				keyboard: 'p',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'paneSelect';
				}
			}
		],
		view: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'global';
				}
			},
			{
				display: 'view: 1',
				keyboard: '1',
				disabled: view === 'one',
				visible: true,
				action: () => {
					view = 'one';
				}
			},
			{
				display: 'view: 2',
				keyboard: '2',
				disabled: view === 'two',
				visible: true,
				action: () => {
					view = 'two';
				}
			},
			{
				display: 'view: 4',
				keyboard: '4',
				disabled: view === 'four',
				visible: true,
				action: () => {
					view = 'four';
				}
			}
		],
		paneSelect: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'global';
				}
			},
			{
				display: 'pane: 1',
				keyboard: '1',
				disabled: pane === 'map1',
				visible: true,
				action: () => {
					pane = 'map1';
				}
			},
			{
				display: 'pane: 2',
				keyboard: '2',
				disabled: pane === 'map2',
				visible: view === 'two' || view === 'four',
				action: () => {
					pane = 'map2';
				}
			},
			{
				display: 'pane: 3',
				keyboard: '3',
				disabled: pane === 'map3',
				visible: view === 'four',
				action: () => {
					pane = 'map3';
				}
			},
			{
				display: 'pane: 4',
				keyboard: '4',
				disabled: pane === 'map4',
				visible: view === 'four',
				action: () => {
					pane = 'map4';
				}
			},
			{
				display: 'select',
				keyboard: 'Enter',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'pane';
				}
			}
		],
		pane: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'paneSelect';
				}
			},
			{
				display: 'base layer',
				keyboard: 'b',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'baseLayerSelect';
				}
			},
			{
				display: 'data layer',
				keyboard: 'd',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'dataLayerSelect';
				}
			},
			{
				display: 'overlays',
				keyboard: 'o',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'overlayLayerSelect';
				}
			}
		],
		baseLayerSelect: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'pane';
				}
			},
			{
				display: 'OpenStreetMap',
				keyboard: 'o',
				disabled: false,
				visible: true,
				action: () => {
					baseLayer[pane] = 'osm';
				}
			}
		],
		dataLayerSelect: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'pane';
				}
			},
			{
				display: 'none',
				keyboard: '0',
				disabled: false,
				visible: true,
				action: () => {
					dataLayer[pane] = null;
				}
			},
			{
				display: 'noaa',
				keyboard: 'n',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'dataNOAA';
				}
			}
		],
		dataNOAA: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'dataLayerSelect';
				}
			},
			{
				display: 'multi-radar multi-sensor',
				keyboard: 'm',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'dataNOAAMRMS';
				}
			}
		],
		dataNOAAMRMS: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'dataNOAA';
				}
			},
			{
				display: 'composite reflectivity - merged qc',
				keyboard: 'r',
				disabled: dataLayer[pane] === 'noaa_mrms_merged_composite_reflectivity_qc',
				visible: true,
				action: () => {
					dataLayer[pane] = 'noaa_mrms_merged_composite_reflectivity_qc';
				}
			}
		],
		overlayLayerSelect: [
			{
				display: 'back',
				keyboard: 'Escape',
				disabled: false,
				visible: true,
				action: () => {
					mode = 'pane';
				}
			}
		]
	});

	let status: string = $derived.by(() => {
		return mode + ' ' + pane;
	});

	let reload1: boolean = $state(false);
	let reload2: boolean = $state(false);
	let reload3: boolean = $state(false);
	let reload4: boolean = $state(false);
	let timeUntilReload: number = $state(60);

	let reloadInterval: ReturnType<typeof setInterval> | null = null;

	$effect(() => {
		if (!reloadInterval) {
			reloadInterval = setInterval(() => {
				timeUntilReload--;
				if (timeUntilReload === 0) {
					timeUntilReload = 60;
					reload1 = true;
					reload2 = true;
					reload3 = true;
					reload4 = true;
				}
			}, 1000);
		}
	})
</script>

<div class="outercontainer">
	<div class="toolbar">
		<h1>wxbox</h1>
		<span class="status">{status}</span>
		<ButtonBar menu={registry[mode]} />
		<span class="dataState">data reload in {timeUntilReload}s</span>
	</div>
	<div class="container">
		<Map
			selected={pane === 'map1'}
			bind:map={map1}
			baseLayer={baseLayer.map1}
			dataLayer={dataLayer.map1}
			overlayLayers={overlayLayers.map1}
			bind:reload={reload1}
		/>
		{#if view === 'two' || view === 'four'}
			<Map
				selected={pane === 'map2'}
				bind:map={map2}
				baseLayer={baseLayer.map2}
				dataLayer={dataLayer.map2}
				overlayLayers={overlayLayers.map2}
				bind:reload={reload2}
			/>
		{/if}
	</div>
	{#if view === 'four'}
		<div class="container">
			<Map
				selected={pane === 'map3'}
				bind:map={map3}
				baseLayer={baseLayer.map3}
				dataLayer={dataLayer.map3}
				overlayLayers={overlayLayers.map3}
				bind:reload={reload3}
			/>
			<Map
				selected={pane === 'map4'}
				bind:map={map4}
				baseLayer={baseLayer.map4}
				dataLayer={dataLayer.map4}
				overlayLayers={overlayLayers.map4}
				bind:reload={reload4}
			/>
		</div>
	{/if}
	<div class="footer text-sm">
		<p>built with &lt;3</p>
		<p>u8.lc & coredoes.dev :)</p>
	</div>
</div>

<style>
	.toolbar h1 {
		font-size: 1rem;
		line-height: 1.5rem;
		margin: 0;
	}
	.toolbar {
		margin: var(--size-1) var(--size-2);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--size-2);
	}

	.container {
		display: flex;
		flex-direction: row;
		flex: 1;
	}
	.outercontainer {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		margin-left: var(--size-2);
		margin-right: var(--size-2);
	}
	.footer p {
		margin: 0;
	}
</style>
