<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 Labelled from '$lib/components/Labelled.svelte';
	import LabelledBlock from '$lib/components/LabelledBlock.svelte';
	import Select from '$lib/components/Select.svelte';
	import { getContextClient } from '@urql/svelte';
	import { createEventDispatcher } from 'svelte';

	const client = getContextClient();
	const dispatch = createEventDispatcher<{ submit: UpdateComicInput }>();

	export let comic: OmitIdentifiers<FullComicFragment>;

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

	$: tags = $tagsQuery.data?.comicTags.edges;
	$: artists = $artistsQuery.data?.artists.edges;
	$: characters = $charactersQuery.data?.characters.edges;
	$: circles = $circlesQuery.data?.circles.edges;
	$: worlds = $worldsQuery.data?.worlds.edges;

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

<form on:submit|preventDefault={submit}>
	<div class="grid-labels">
		<Labelled label="Title" let:id>
			<input required {id} bind:value={comic.title} title={comic.title} />
		</Labelled>
		<Labelled label="Original Title" let:id>
			<input {id} bind:value={comic.originalTitle} title={comic.originalTitle} />
		</Labelled>
		<Labelled label="URL" let:id>
			<input {id} bind:value={comic.url} />
		</Labelled>
		<Labelled label="Date" let:id>
			<input {id} type="date" bind:value={comic.date} pattern={'d{4}-d{2}-d{2}'} />
		</Labelled>
		<Labelled label="Category" let:id>
			<Select {id} options={categories} bind:value={comic.category} />
		</Labelled>
		<Labelled label="Rating" let:id>
			<Select {id} options={ratings} bind:value={comic.rating} />
		</Labelled>
		<Labelled label="Censorship" let:id>
			<Select {id} options={censorships} bind:value={comic.censorship} />
		</Labelled>
		<Labelled label="Language" let:id>
			<Select {id} options={languages} bind:value={comic.language} />
		</Labelled>
		<Labelled label="Direction" let:id>
			<Select {id} options={directions} bind:value={comic.direction} />
		</Labelled>
		<Labelled label="Layout" let:id>
			<Select {id} options={layouts} bind:value={comic.layout} />
		</Labelled>
	</div>

	<LabelledBlock label="Artists" let:id>
		<Select multi object {id} options={artists} bind:value={comic.artists} />
	</LabelledBlock>
	<LabelledBlock label="Circles" let:id>
		<Select multi object {id} options={circles} bind:value={comic.circles} />
	</LabelledBlock>
	<LabelledBlock label="Characters" let:id>
		<Select multi object {id} options={characters} bind:value={comic.characters} />
	</LabelledBlock>
	<LabelledBlock label="Worlds" let:id>
		<Select multi object {id} options={worlds} bind:value={comic.worlds} />
	</LabelledBlock>
	<LabelledBlock label="Tags" let:id>
		<Select multi object {id} options={tags} bind:value={comic.tags} />
	</LabelledBlock>
	<slot />
</form>