<script lang="ts">
	import { deleteNamespaces } from '$gql/Mutations';
	import { fetchNamespace, namespacesQuery } from '$gql/Queries';
	import type { Namespace } from '$gql/graphql';
	import { NamespaceSortLabel } from '$lib/Enums';
	import { BasicFilterContext } from '$lib/Filter.svelte';
	import { quickComicFilter } from '$lib/Navigation';
	import { toastFinally } from '$lib/Toasts';
	import AddButton from '$lib/components/AddButton.svelte';
	import Cardlet from '$lib/components/Cardlet.svelte';
	import Empty from '$lib/components/Empty.svelte';
	import Guard from '$lib/components/Guard.svelte';
	import Head from '$lib/components/Head.svelte';
	import Cardlets from '$lib/containers/Cardlets.svelte';
	import Column from '$lib/containers/Column.svelte';
	import AddNamespace from '$lib/dialogs/AddNamespace.svelte';
	import EditNamespace from '$lib/dialogs/EditNamespace.svelte';
	import Pagination from '$lib/pagination/Pagination.svelte';
	import Selectable from '$lib/selection/Selectable.svelte';
	import { initSelectionContext } from '$lib/selection/Selection.svelte';
	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
	import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
	import Search from '$lib/toolbar/Search.svelte';
	import SelectItems from '$lib/toolbar/SelectItems.svelte';
	import SelectSort from '$lib/toolbar/SelectSort.svelte';
	import SelectionControls from '$lib/toolbar/SelectionControls.svelte';
	import Toolbar from '$lib/toolbar/Toolbar.svelte';
	import { getContextClient } from '@urql/svelte';
	import { modals } from 'svelte-modals';
	import type { PageProps } from './$types';

	let { data }: PageProps = $props();
	let pagination = $derived(data.pagination);
	let sort = $derived(data.sort);

	const client = getContextClient();
	let result = $derived(namespacesQuery(client, { ...data }));
	let namespaces = $derived($result.data?.namespaces);

	let selection = initSelectionContext<Namespace>('Namespace', (n) => n.name);
	$effect(() => {
		if (namespaces) {
			selection.view = namespaces.edges;
		}
	});

	let filter = $state(new BasicFilterContext(data.filter));
	$effect(() => {
		filter = new BasicFilterContext(data.filter);
	});

	const edit = (id: number) => {
		fetchNamespace(client, id)
			.then((namespace) => modals.open(EditNamespace, { namespace }))
			.catch(toastFinally);
	};

	const quickFilter = (id: number) => quickComicFilter(`${id}:`, 'tags');
</script>

<Head section="Namespaces" />

<Column>
	<Toolbar>
		{#snippet start()}
			<SelectionControls>
				<DeleteSelection mutation={deleteNamespaces} />
			</SelectionControls>
		{/snippet}
		{#snippet center()}
			<Search name="Namespaces" {filter} bind:field={filter.include.name.contains} />
			<SelectSort {sort} labels={NamespaceSortLabel} />
			<SelectItems {pagination} />
		{/snippet}
		{#snippet end()}
			<AddButton title="Add Namespace" onclick={() => modals.open(AddNamespace)} />
		{/snippet}
	</Toolbar>
	{#if namespaces}
		<Pagination {pagination} total={namespaces.count} />
		<main>
			<Cardlets>
				{#each namespaces.edges as { id, name }, index (id)}
					<Selectable {index} {id} onclick={edit} onauxclick={quickFilter}>
						{#snippet children({ onclick, onauxclick, selected })}
							<Cardlet {name} {onclick} {onauxclick}>
								{#snippet overlay()}
									<SelectionOverlay position="right" centered {selected} />
								{/snippet}
							</Cardlet>
						{/snippet}
					</Selectable>
				{:else}
					<Empty />
				{/each}
			</Cardlets>
		</main>
		<Pagination {pagination} total={namespaces.count} />
	{:else}
		<Guard {result} />
	{/if}
</Column>
