<script lang="ts">
	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
	import * as Empty from '$lib/components/ui/empty/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import BookList from '$lib/components/view/book-list.svelte';
	import { FolderX, Upload } from '@lucide/svelte';
	import { getBookOperationsState } from '$lib/state/bookOperations.svelte.js';

	let { data } = $props();

	let bookOps = getBookOperationsState();
</script>

<ScrollArea class="h-full w-full">
	<div class="mr-2 flex flex-col gap-8 p-4">
		<!-- One shelf per built-in preset, in the order they are defined -->
		{#each data.presets as preset (preset.id)}
			<BookList books={data.shelves[preset.id]} title={preset.heading} />
		{/each}
	</div>

	<!-- Empty when no preset returned anything, i.e. the library has no books -->
	{#if data.presets.every((preset) => data.shelves[preset.id].length === 0)}
		<div class="flex h-full w-full flex-col items-center justify-center">
			<!-- Show a CTA to upload books if the library is empty -->
			<Empty.Root class="mb-[12vh]">
				<Empty.Header>
					<Empty.Media variant="icon">
						<FolderX />
					</Empty.Media>
					<Empty.Title>Library Empty</Empty.Title>
					<Empty.Description>
						This library doesn't have any books yet. Get started by uploading your first books.
					</Empty.Description>
				</Empty.Header>
				<Empty.Content>
					<Button onclick={async () => (bookOps.uploadDialogOpen = true)}>
						<Upload />
						Upload Books
					</Button>
				</Empty.Content>
			</Empty.Root>
		</div>
	{/if}
</ScrollArea>
