<script lang="ts">
	import * as Field from '$lib/components/ui/field/index.js';
	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
	import { getBookOperationsState } from '$lib/state/bookOperations.svelte';

	let {
		open = $bindable(),
		title = 'Delete book?',
		deleteFn
	}: {
		open: boolean;
		title?: string;
		deleteFn: (deleteFiles: boolean) => {};
	} = $props();

	const selectedState = getBookSelectionState();
	const bookOps = getBookOperationsState();

	let deleteFiles = $state(false);
</script>

<Dialog.Root bind:open>
	<Dialog.Content class="sm:max-w-[425px]">
		<Dialog.Header>
			<Dialog.Title>{title}</Dialog.Title>
			<Dialog.Description>
				This will delete the book(s) from the database, and optionally delete the files from the
				filesystem.
			</Dialog.Description>
		</Dialog.Header>

		<Field.Set>
			<Field.Group>
				<!-- Delete files checkbox -->
				<Field.Field>
					<div class="flex items-center gap-2">
						<Checkbox bind:checked={deleteFiles} />
						<Field.Label class="font-normal">Delete files from the filesystem</Field.Label>
					</div>
				</Field.Field>
			</Field.Group>
		</Field.Set>

		<!-- Buttons -->
		<Dialog.Footer class="ml-auto flex">
			<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
			<Button
				onclick={async () => {
					open = false;
					await deleteFn(deleteFiles);
				}}
				variant="destructive">Delete</Button
			>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>
