<script>
	import { onMount } from 'svelte';
	import { clickOutside } from 'svelte-outside';
	import * as Card from '$lib/components/ui/card/index';
	import * as Select from '$lib/components/ui/select';
	import { Label } from '$lib/components/ui/label';
	import { db } from '../db/main';
	import { liveQuery } from 'dexie';
	import { appState, shortforms } from '$lib/stores.svelte';
	import { cacheShortforms } from '../modules/shortforms';

	const onSelectedStandardListChange = (e) => {
		console.log('onSelectedStandardListChange', e);
		shortforms.standardList = e.value;
		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
	};

	const onSelectedSubjectListChange = (e) => {
		if (e.value == 0) {
			listSelectorForm.subject = { value: '', label: '' };
			shortforms.subjectList = '';
			cacheShortforms([Number(shortforms.standardList)]);
			return;
		}
		console.log('onSelectedSubjectListChange', e);
		shortforms.subjectList = e.value;
		cacheShortforms([Number(shortforms.standardList), Number(shortforms.subjectList)]);
	};

	const onSubmit = (e) => {
		e.preventDefault();
		console.log('submit', listSelectorForm);
	};

	$: listSelectorForm = {
		standard: { value: '', label: '' },
		subject: {}
	};

	const getListFromId = (lists, id) => {
		return lists.filter((l) => l.id == id)[0];
	};

	let standardLists = [];
	let subjectLists = [];
	let show = false;
	onMount(async () => {
		//console.log($state.snapshot(shortforms));
		db.lists.toArray().then((lists) => {
			standardLists = lists.filter((l) => l.type == 0);
			subjectLists = lists.filter((l) => l.type == 1);
			const standard = getListFromId(standardLists, shortforms.standardList);
			listSelectorForm.standard = { value: standard.id, label: standard.name };
			const subject = getListFromId(subjectLists, shortforms.subjectList);
			listSelectorForm.subject = { value: subject.id, label: subject.name };
			console.log(listSelectorForm);
		});

		setTimeout(() => {
			show = true;
		}, 15);
	});
	const close = () => {
		if (show == true) {
			appState.open = '';
		}
	};
</script>

{#if show}
	<div use:clickOutside={close}>
		<Card.Root class="mx-auto w-[490px]">
			<Card.Header>
				<Card.Title>Välj förkortningslistor</Card.Title>
				<Card.Description></Card.Description>
			</Card.Header>
			<Card.Content class="mx-auto">
				<form
					class="grid gap-4 py-4"
					method="post"
					enctype="multipart/form-data"
					onsubmit={onSubmit}
					autocomplete="off"
				>
					<div class="grid grid-cols-4 items-center gap-4">
						<Label>Standardlista</Label>
						<Select.Root
							selected={listSelectorForm.standard}
							onSelectedChange={onSelectedStandardListChange}
						>
							<Select.Trigger class="w-[290px]">
								<Select.Value placeholder="Ingen lista vald" />
							</Select.Trigger>

							<Select.Content>
								{#each standardLists as list}
									<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
					<div class="grid grid-cols-4 items-center gap-4">
						<Label>Ämneslista</Label>
						<Select.Root
							selected={listSelectorForm.subject}
							onSelectedChange={onSelectedSubjectListChange}
							disabled={subjectLists.length < 1}
						>
							<Select.Trigger class="w-[290px]">
								<Select.Value placeholder="Ingen lista vald" />
							</Select.Trigger>

							<Select.Content>
								<Select.Item value={0} label="Ingen lista vald">Ingen lista vald</Select.Item>
								{#each subjectLists as list}
									<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
								{/each}
							</Select.Content>
						</Select.Root>
					</div>
					<button type="submit" class="hidden" />
				</form>
			</Card.Content>
			<!--
	<Card.Footer class="flex justify-between">
		<Button on:click={cancelCreate} variant="outline">Avbryt</Button>
		<Button on:click={handleCreate}>Importera</Button>
	</Card.Footer>
	-->
		</Card.Root>
	</div>
{/if}
