<script lang="ts">
	import { createLibrary } from '$lib/api/library.remote';
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import * as Field from '$lib/components/ui/field/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import { Textarea } from '$lib/components/ui/textarea/index';
	import { Button } from '$lib/components/ui/button/index.js';
	import { toast } from 'svelte-sonner';
	import { goto, invalidate, invalidateAll } from '$app/navigation';
	import { page } from '$app/state';
	import { getLibraryState } from '$lib/state/library.svelte';

	let { open = $bindable(false) } = $props();

	const libraryState = getLibraryState();
</script>

<Dialog.Root bind:open>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Create a new Library</Dialog.Title>
		</Dialog.Header>

		<form
			{...createLibrary.enhance(async ({ form, submit }) => {
				try {
					await submit();

					// Check if there are any validation issues
					const issues = createLibrary.fields.allIssues();
					if (issues && issues.length > 0) {
						return;
					}

					const libraryName = createLibrary.fields.name.value();

					form.reset();
					open = false;
					toast.success(`Library '${libraryName}' created.`);

					libraryState.addLibrary(createLibrary.result);
				} catch (error) {
					console.error('Failed to create library: ', error);
					toast.error('Failed to create library');
				}
			})}
			class="flex flex-col gap-3"
		>
			<Field.Set>
				<Field.Group>
					<!-- Library name -->
					<Field.Field>
						<Field.Label for="name">Library name</Field.Label>
						<Input {...createLibrary.fields.name.as('text')} />
						{#each createLibrary.fields.name.issues() ?? [] as issue}
							<Field.Error>{issue.message}</Field.Error>
						{/each}
					</Field.Field>

					<!-- Description -->
					<Field.Field>
						<Field.Label for="description">Description</Field.Label>
						<Textarea {...createLibrary.fields.description.as('text')} />
						{#each createLibrary.fields.description.issues() ?? [] as issue}
							<Field.Error>{issue.message}</Field.Error>
						{/each}
					</Field.Field>

					<!-- Root Path -->
					<Field.Field>
						<Field.Label for="root_path">Root Path</Field.Label>
						<Input {...createLibrary.fields.root_path.as('text')} />
						{#each createLibrary.fields.root_path.issues() ?? [] as issue}
							<Field.Error>{issue.message}</Field.Error>
						{/each}
						<Field.Description class="text-xs">
							Path the books in this library will be stored
						</Field.Description>
					</Field.Field>

					<!-- Path Template -->
					<Field.Field>
						<Field.Label for="path_template">Path Template</Field.Label>
						<Input {...createLibrary.fields.path_template.as('text')} />
						{#each createLibrary.fields.path_template.issues() ?? [] as issue}
							<Field.Error>{issue.message}</Field.Error>
						{/each}
						<Field.Description class="text-xs">
							The directory structure of your library
						</Field.Description>
					</Field.Field>
				</Field.Group>
			</Field.Set>

			<Button type="submit" class="ml-auto w-24">Create</Button>
		</form>
	</Dialog.Content>
</Dialog.Root>
