<script lang="ts">
	import { deleteTags } from '$gql/Mutations';
	import { fetchTag, tagsQuery } from '$gql/Queries';
	import { type Tag } from '$gql/graphql';
	import { TagSortLabel } from '$lib/Enums';
	import { TagFilterContext, initFilterContext } from '$lib/Filter';
	import { initPaginationContext } from '$lib/Pagination';
	import { initSelectionContext } from '$lib/Selection';
	import { initSortContext } from '$lib/Sort';
	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 AddTag from '$lib/dialogs/AddTag.svelte';
	import EditTag from '$lib/dialogs/EditTag.svelte';
	import UpdateTagsDialog from '$lib/dialogs/UpdateTags.svelte';
	import TagFilterForm from '$lib/filter/TagFilterForm.svelte';
	import Pagination from '$lib/pagination/Pagination.svelte';
	import Selectable from '$lib/selection/Selectable.svelte';
	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
	import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
	import EditSelection from '$lib/toolbar/EditSelection.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 ToggleAdvancedFilters from '$lib/toolbar/ToggleAdvancedFilters.svelte';
	import Toolbar from '$lib/toolbar/Toolbar.svelte';
	import { getContextClient } from '@urql/svelte';
	import { openModal } from 'svelte-modals';
	import type { PageData } from './$types';

	const client = getContextClient();

	export let data: PageData;

	$: result = tagsQuery(client, {
		pagination: data.pagination,
		filter: data.filter,
		sort: data.sort
	});

	$: tags = $result.data?.tags;

	const selection = initSelectionContext<Tag>('Tag', (t) => t.name);
	$: if (tags) {
		$selection.view = tags.edges;
		$pagination.total = tags.count;
	}

	const filter = initFilterContext<TagFilterContext>();
	$: $filter = new TagFilterContext(data.filter);

	const sort = initSortContext(data.sort, TagSortLabel);
	$: $sort.update = data.sort;

	const pagination = initPaginationContext();
	$: $pagination.update = data.pagination;

	const edit = (id: number) => {
		fetchTag(client, id)
			.then((tag) => openModal(EditTag, { tag }))
			.catch(toastFinally);
	};
</script>

<Head section="Tags" />

<Column>
	<Toolbar>
		<SelectionControls slot="start">
			<EditSelection dialog={UpdateTagsDialog} />
			<DeleteSelection mutation={deleteTags} />
		</SelectionControls>
		<svelte:fragment slot="center">
			<Search name="Tags" bind:field={$filter.include.controls.name.contains} />
			<ToggleAdvancedFilters />
			<SelectSort />
			<SelectItems />
		</svelte:fragment>
		<svelte:fragment slot="end">
			<AddButton title="Add Tag" on:click={() => openModal(AddTag)} />
		</svelte:fragment>
		<TagFilterForm />
	</Toolbar>
	{#if tags}
		<Pagination />
		<main>
			<Cardlets>
				{#each tags.edges as { id, name, description }, index (id)}
					<Selectable {index} {id} {edit} let:handle let:selected>
						<Cardlet {name} title={description} on:click={handle} filter="tags" id={`:${id}`}>
							<SelectionOverlay slot="overlay" position="right" centered {selected} />
						</Cardlet>
					</Selectable>
				{:else}
					<Empty />
				{/each}
			</Cardlets>
		</main>
		<Pagination />
	{:else}
		<Guard {result} />
	{/if}
</Column>
