<script lang="ts">
	import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries';
	import { type OmitIdentifiers } from '$gql/Utils';
	import type { FullComicFragment, UpdateComicInput } from '$gql/graphql';
	import { categories, censorships, directions, languages, layouts, ratings } from '$lib/Enums';
	import LabelledBlock from '$lib/components/LabelledBlock.svelte';
	import Select from '$lib/components/Select.svelte';
	import { getContextClient } from '@urql/svelte';
	import { type Snippet } from 'svelte';

	const client = getContextClient();

	interface Props {
		input: OmitIdentifiers<FullComicFragment>;
		submit: (input: UpdateComicInput) => void;
		children?: Snippet;
	}

	let { input = $bindable(), submit, children }: Props = $props();

	let tagsQuery = $derived(comicTagList(client));
	let artistsQuery = $derived(artistList(client));
	let charactersQuery = $derived(characterList(client));
	let circlesQuery = $derived(circleList(client));
	let worldsQuery = $derived(worldList(client));

	let tags = $derived($tagsQuery.data?.comicTags.edges);
	let artists = $derived($artistsQuery.data?.artists.edges);
	let characters = $derived($charactersQuery.data?.characters.edges);
	let circles = $derived($circlesQuery.data?.circles.edges);
	let worlds = $derived($worldsQuery.data?.worlds.edges);

	function onsubmit(event: SubmitEvent) {
		event.preventDefault();

		submit({
			direction: input.direction,
			layout: input.layout,
			rating: input.rating,
			category: input.category,
			censorship: input.censorship,
			title: input.title,
			originalTitle: input.originalTitle,
			url: input.url,
			date: input.date === '' ? null : input.date,
			language: input.language,
			tags: { ids: input.tags.map((t) => t.id) },
			artists: { ids: input.artists.map((a) => a.id) },
			characters: { ids: input.characters.map((c) => c.id) },
			circles: { ids: input.circles.map((c) => c.id) },
			worlds: { ids: input.worlds.map((w) => w.id) }
		});
	}
</script>

<form {onsubmit}>
	<div class="grid-labels">
		<label class="self-center" for="title">Title</label>
		<input required id="title" bind:value={input.title} title={input.title} />

		<label class="self-center" for="original-title">Original Title</label>
		<input id="original-title" bind:value={input.originalTitle} title={input.originalTitle} />

		<label class="self-center" for="url">URL</label>
		<input id="url" bind:value={input.url} />

		<label class="self-center" for="date">Date</label>
		<input id="date" type="date" bind:value={input.date} pattern={'d{4}-d{2}-d{2}'} />

		<label class="self-center" for="category">Category</label>
		<Select id="category" options={categories} bind:value={input.category} />

		<label class="self-center" for="rating">Rating</label>
		<Select id="rating" options={ratings} bind:value={input.rating} />

		<label class="self-center" for="censorship">Censorship</label>
		<Select id="censorship" options={censorships} bind:value={input.censorship} />

		<label class="self-center" for="language">Language</label>
		<Select id="language" options={languages} bind:value={input.language} />

		<label class="self-center" for="direction">Direction</label>
		<Select id="direction" options={directions} bind:value={input.direction} />

		<label class="self-center" for="layout">Layout</label>
		<Select id="layout" options={layouts} bind:value={input.layout} />
	</div>

	<LabelledBlock label="Artists">
		{#snippet children({ id })}
			<Select multi object {id} options={artists} bind:value={input.artists} />
		{/snippet}
	</LabelledBlock>
	<LabelledBlock label="Circles">
		{#snippet children({ id })}
			<Select multi object {id} options={circles} bind:value={input.circles} />
		{/snippet}
	</LabelledBlock>
	<LabelledBlock label="Characters">
		{#snippet children({ id })}
			<Select multi object {id} options={characters} bind:value={input.characters} />
		{/snippet}
	</LabelledBlock>
	<LabelledBlock label="Worlds">
		{#snippet children({ id })}
			<Select multi object {id} options={worlds} bind:value={input.worlds} />
		{/snippet}
	</LabelledBlock>
	<LabelledBlock label="Tags">
		{#snippet children({ id })}
			<Select multi object {id} options={tags} bind:value={input.tags} />
		{/snippet}
	</LabelledBlock>
	{@render children?.()}
</form>