<script lang="ts">
	import Textarea from '../components/textarea.svelte';
	import Import from '../components/import/import.svelte';
	import Create from '../components/create.svelte';
	import Dashboard from '../components/dashboard.svelte';
	import { db, deleteShortformList, type Shortform } from '../db/main';
	import Menu from "../components/menu.svelte";
	import { Button } from '$lib/components/ui/button';
	import { appState } from '$lib/stores.svelte'
	let loaded = false
	$effect(() => {
		appState.open
		if (loaded) {
			if (appState.open == "") {
				textarea.focus()
			}
			if (appState.open == "dashboard") {
				console.log("should open dashboard")
				showDashboard = true
			}
		}
		loaded = true

	})
	import { hotkeys } from '../modules/keyboard';
	let showDashboard: boolean = true;
	import { Toaster } from "$lib/components/ui/sonner";
	const handleHotkeys = (e: KeyboardEvent) => {
		hotkeys.get(e.key)?.action(e);
	};
	let textarea = null

</script>
<svelte:head>
<title>SKRIVERT</title>
</svelte:head>
<svelte:window on:keydown={handleHotkeys} />

<div class="h-dvh w-full overflow-hidden" role="application">
	{#if appState.open == "create"}
		<div class="fixed flex top-0 right-0 left-0 z-50 justify-center items-center align-middle w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
			<Create />
		</div>
	{/if}
	<div class="h-full">
		<Menu />
		<Textarea bind:ref={textarea} />
	<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
		<!-- <Dashboard open={showDashboard} />-->
	</div>
</div>

<Toaster />
