<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import * as Tabs from '$lib/components/ui/tabs/index.js';
	import { type Book } from '$lib/schema';
	import EditCover from './edit-cover.svelte';
	import EditFiles from './edit-files.svelte';
	import EditMetadata from './edit-metadata.svelte';

	let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
</script>

<Dialog.Root bind:open>
	{#if book}
		<Dialog.Content class="sm:max-w-xl">
			<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
				<Tabs.List class="grid w-full grid-cols-3">
					<Tabs.Trigger value="metadata">Metadata</Tabs.Trigger>
					<Tabs.Trigger value="cover">Cover</Tabs.Trigger>
					<Tabs.Trigger value="files">Files</Tabs.Trigger>
				</Tabs.List>

				<!-- Metadata form -->
				<Tabs.Content value="metadata" class="h-full overflow-y-auto pb-1">
					<EditMetadata {book} {open} />
				</Tabs.Content>

				<!-- Cover form -->
				<Tabs.Content value="cover">
					<EditCover {book} {open} />
				</Tabs.Content>

				<!-- Add files form -->
				<Tabs.Content value="files">
					<EditFiles {book} />
				</Tabs.Content>
			</Tabs.Root>
		</Dialog.Content>
	{/if}
</Dialog.Root>
