<script lang="ts">
	import '../../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import * as Sidebar from '$lib/components/ui/sidebar';
	import AppSidebar from '$lib/AppSidebar.svelte';
	import { Separator } from '$lib/components/ui/separator';
	import * as Breadcrumb from '$lib/components/ui/breadcrumb';
	import Spinner from '$lib/Spinner.svelte';
	import { connectWS, wsState } from '$lib/ws.svelte';
	import { Toaster } from '$lib/components/ui/sonner';
	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
	import { onMount } from 'svelte';
	import { browser } from '$app/environment';
	import { sidebarState } from "$lib/sidebar.svelte";
	
	let { children } = $props();

	onMount(() => {
		if(!browser) return;

		connectWS();
		console.log("Connecting to WebSocket...");
	})
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

{#if wsState.closed}
	<ConnectionLostDialog />
{/if}

{#if !wsState.connected && !wsState.closed}
	<div id="blocker">
		<Spinner />

		<h2 class="text-2xl">Verbindung herstellen...</h2>
	</div>
{/if}

<Toaster position="bottom-right" theme="dark" richColors={true} />

<Sidebar.Provider bind:open={sidebarState.open}>
	<AppSidebar />
	<Sidebar.Inset>
		<!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> -->
		<header class="flex h-2 shrink-0 items-center gap-2 px-4">
			<!-- <Sidebar.Trigger class="-ml-1" /> -->
			<!-- <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" /> -->
			<!-- <Breadcrumb.Root>
				<Breadcrumb.List>
					<Breadcrumb.Item class="hidden md:block">
						<Breadcrumb.Link href="#">Building Your Application</Breadcrumb.Link>
					</Breadcrumb.Item>
					<Breadcrumb.Separator class="hidden md:block" />
					<Breadcrumb.Item>
						<Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
					</Breadcrumb.Item>
				</Breadcrumb.List>
			</Breadcrumb.Root> -->
		</header>
		<div class="flex flex-col gap-2">
			{@render children?.()}
		</div>
		<!-- <div class="flex flex-1 flex-col gap-4 p-4">
			<div class="grid auto-rows-min gap-4 md:grid-cols-3">
				<div class="bg-muted/50 aspect-video rounded-xl"></div>
				<div class="bg-muted/50 aspect-video rounded-xl"></div>
				<div class="bg-muted/50 aspect-video rounded-xl"></div>
			</div>
			<div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min"></div>
		</div> -->
	</Sidebar.Inset>
</Sidebar.Provider>

<style>
	#blocker {
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5px);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 1rem;
	}
</style>
