<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>
