<script lang="ts">
	import { addComic, updateArchives } from '$gql/Mutations';
	import { type FullArchiveFragment } from '$gql/graphql';
	import { toastFinally } from '$lib/Toasts';
	import AddButton from '$lib/components/AddButton.svelte';
	import Card, { comicCard } from '$lib/components/Card.svelte';
	import OrganizedButton from '$lib/components/OrganizedButton.svelte';
	import ComicPills from '$lib/pills/ComicPills.svelte';
	import { getSelectionContext } from '$lib/selection/Selection.svelte';
	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
	import { getContextClient } from '@urql/svelte';
	import AddOverlay from './AddOverlay.svelte';

	const client = getContextClient();
	const selection = getSelectionContext();

	let { archive }: { archive: FullArchiveFragment } = $props();

	function addNew() {
		addComic(client, {
			input: {
				archive: { id: archive.id },
				title: archive.name,
				pages: { ids: selection.ids },
				cover: { id: archive.pages[selection.indices.toSorted((a, b) => a - b)[0]].id }
			}
		})
			.then((mutatation) => {
				const data = mutatation.addComic;
				if (data.__typename === 'AddComicSuccess' && !data.archivePagesRemaining) {
					selection.clear();
				} else {
					selection.none();
				}
			})
			.catch(toastFinally);
	}

	function toggleOrganized() {
		updateArchives(client, { ids: archive.id, input: { organized: !archive.organized } }).catch(
			toastFinally
		);
	}
</script>

<div class="flex flex-col gap-4">
	<div class="flex gap-2 text-sm">
		<SelectionControls page>
			<AddButton title="Add Comic from selected" onclick={addNew} />
		</SelectionControls>
		<div class="grow"></div>
		<OrganizedButton organized={archive.organized} onclick={toggleOrganized} />
	</div>

	{#if archive.comics.length > 0}
		<div class="flex flex-col gap-1">
			<h2 class="text-base font-medium">Comics</h2>
			<div class="flex shrink-0 flex-col gap-4">
				{#each archive.comics as comic}
					<Card compact {...comicCard(comic)}>
						{#snippet overlay()}
							<AddOverlay id={comic.id} />
						{/snippet}
						<ComicPills {comic} />
					</Card>
				{/each}
			</div>
		</div>
	{/if}
</div>