<script lang="ts">
	import { listBookshelves } from '$lib/api';
	import AppSidebar from '$lib/components/layout/app-sidebar.svelte';
	import SiteHeader from '$lib/components/layout/site-header.svelte';
	import { Loading } from '$lib/components/ui/command';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import type { Library, PaginatedResponse } from '$lib/schema';
	import { setBookOperationsState } from '$lib/state/bookOperations.svelte';
	import { setBookshelfState } from '$lib/state/bookshelf.svelte';
	import { setLibraryState } from '$lib/state/library.svelte.js';

	import { ModeWatcher } from 'mode-watcher';
	import type { Snippet } from 'svelte';
	import { Toaster } from 'svelte-sonner';

	let { data, children }: { data: { libraries: PaginatedResponse<Library> }; children: Snippet } =
		$props();

	const libraryState = setLibraryState(data.libraries.items);
	const bookshelfState = setBookshelfState();
	const bookOps = setBookOperationsState(libraryState.activeLibrary!.id);
</script>

<Toaster />
<ModeWatcher />

<div class="[--header-height:calc(--spacing(14))]">
	<Sidebar.Provider class="flex flex-col">
		<div class="flex h-screen">
			<AppSidebar />
			<Sidebar.Inset class="flex min-w-0 flex-1 flex-col overflow-x-hidden">
				<SiteHeader />
				<div class="mt-4 flex-1 overflow-hidden p-4 pt-0">
					{@render children?.()}
				</div>
			</Sidebar.Inset>
		</div>
	</Sidebar.Provider>
</div>
