<script lang="ts">
	import type { MutationWith } from '$gql/Utils';
	import Organized from '$lib/icons/Organized.svelte';
	import { getSelectionContext } from '$lib/selection/Selection.svelte';
	import { toastFinally } from '$lib/Toasts';
	import { getContextClient } from '@urql/svelte';

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

	let { mutation }: { mutation: MutationWith<{ organized: boolean }> } = $props();

	function mutate(organized: boolean) {
		mutation(client, { ids: selection.ids, input: { organized } }).catch(toastFinally);
	}
</script>

<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}>
	<Organized tristate organized={true} />
	<span>Organized</span>
</button>
<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}>
	<Organized dim tristate organized={false} />
	<span>Unorganized</span>
</button>