<script lang="ts">
	import * as Accordion from '$lib/components/ui/accordion/index';
	import * as Tooltip from '$lib/components/ui/tooltip/index';
	import * as Table from '$lib/components/ui/table/index';
	// import * as AlertDialog from '$lib/components/ui/alert-dialog/index';

	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';

	import * as Dialog from '$lib/components/ui/dialog/index.js';

	import type { Book } from '$lib/schema/index';
	import { Badge } from '$lib/components/ui/badge/index';
	import { formatFileSize, getFileType } from '$lib/utils';
	import { BookOpenText, Download } from '@lucide/svelte';

	let { book }: { book: Book } = $props();

	let files = $state(book.files);
</script>

<Accordion.Root type="single" class="mt-4 w-full rounded-lg bg-muted px-4 shadow-lg drop-shadow ">
	<!-- <Separator></Separator> -->
	<Accordion.Item value="item-1">
		<Accordion.Trigger>
			<div class="ml-2 flex gap-4">
				Library Files
				<Badge>{book.files.length}</Badge>
			</div>
		</Accordion.Trigger>
		<Accordion.Content>
			<Table.Root>
				<Table.Header>
					<Table.Row>
						<Table.Head class="w-[300px]">Filename</Table.Head>
						<Table.Head>Size</Table.Head>
						<Table.Head>File type</Table.Head>
						<Table.Head class="text-right">Actions</Table.Head>
					</Table.Row>
				</Table.Header>
				<Table.Body>
					{#each book.files as file (file.id)}
						<Table.Row>
							<Table.Cell class="">{file.filename}</Table.Cell>
							<Table.Cell>{formatFileSize(file.size)}</Table.Cell>
							<Table.Cell>{getFileType(file.filename)}</Table.Cell>
							<Table.Cell class="text-right">
								<div class="flex justify-end gap-1">
									<!-- Read button -->
									{#if getFileType(file.filename) == 'EPUB' || getFileType(file.filename) == 'PDF'}
										<Tooltip.Provider>
											<Tooltip.Root>
												<Tooltip.Trigger
													class="{buttonVariants({
														variant: 'default',
														size: 'icon'
													})} scale-90"
													onclick={() => handleRead(file)}
												>
													<BookOpenText />
												</Tooltip.Trigger>
												<Tooltip.Content side="bottom">
													<p>Read</p>
												</Tooltip.Content>
											</Tooltip.Root>
										</Tooltip.Provider>
									{/if}

									<!-- Download button -->
									<Tooltip.Provider>
										<Tooltip.Root>
											<Tooltip.Trigger
												class="{buttonVariants({ variant: 'default', size: 'icon' })} scale-90"
												onclick={() => handleDownload(file)}
											>
												<Download />
											</Tooltip.Trigger>
											<Tooltip.Content side="bottom">
												<p>Download</p>
											</Tooltip.Content>
										</Tooltip.Root>
									</Tooltip.Provider>

									<!-- Delete button -->
									<AlertDialog.Root bind:open={fileDeleteDialogOpen}>
										<AlertDialog.Trigger>
											<Tooltip.Provider>
												<Tooltip.Root>
													<Tooltip.Trigger
														class="{buttonVariants({
															variant: 'destructive',
															size: 'icon'
														})} scale-90"
														onclick={() => {
															fileToDelete = file.id;
														}}
													>
														<Trash2 />
													</Tooltip.Trigger>
													<Tooltip.Content side="bottom">
														<p>Delete</p>
													</Tooltip.Content>
												</Tooltip.Root>
											</Tooltip.Provider>
										</AlertDialog.Trigger>
										<AlertDialog.Content>
											<AlertDialog.Header>
												<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
												<AlertDialog.Description>
													This action cannot be undone. This will permanently delete the record from
													the database and the file from the filesystem.
												</AlertDialog.Description>
											</AlertDialog.Header>
											<AlertDialog.Footer>
												<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
												<AlertDialog.Action
													onclick={() => {
														handleDeleteFile(fileToDelete);
														fileDeleteDialogOpen = false;
														fileToDelete = undefined;
													}}
													class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
													>Delete</AlertDialog.Action
												>
											</AlertDialog.Footer>
										</AlertDialog.Content>
									</AlertDialog.Root>
								</div>
							</Table.Cell>
						</Table.Row>
					{/each}
				</Table.Body>
			</Table.Root>
		</Accordion.Content>
	</Accordion.Item>
</Accordion.Root>
