<script lang="ts">
	import type { DeleteMutation } from '$gql/Mutations';
	import DeleteButton from '$lib/components/DeleteButton.svelte';
	import { getSelectionContext } from '$lib/selection/Selection.svelte';
	import { toastFinally } from '$lib/Toasts';
	import { confirmDeletion } from '$lib/Utils';
	import { getContextClient } from '@urql/svelte';

	const client = getContextClient();

	interface Props {
		mutation: DeleteMutation;
		warning?: string;
	}

	let { mutation, warning = undefined }: Props = $props();
	let selection = getSelectionContext();

	function onclick() {
		const mutate = () => {
			mutation(client, { ids: selection.ids }).then(selection.clear).catch(toastFinally);
		};

		confirmDeletion(selection.typename, selection.names, mutate, warning);
	}
</script>

<DeleteButton {onclick} />