<script lang="ts">
	import { accelerator } from '$lib/Shortcuts';
	import Dialog from '$lib/components/Dialog.svelte';
	import type { ModalProps } from 'svelte-modals';

	interface Props extends ModalProps {
		callback: () => void;
		names: string[];
		typename: string;
		warning?: string;
	}

	let { callback, names, typename, warning = undefined, ...modal }: Props = $props();

	const multiple = names.length > 1;
	const formattedTypename = multiple ? `${typename}s` : typename;
	const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0];

	function confirm(event: SubmitEvent) {
		event.preventDefault();
		callback();
		modal.close();
	}
</script>

<Dialog title="Delete {formattedTypename}" {...modal}>
	<form onsubmit={confirm}>
		<div class="flex flex-col">
			<p class="mb-3">
				Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>?
			</p>
			{#if multiple}
				<ul class="mb-3 ml-8 list-disc">
					{#each names.slice(0, 10) as name (name)}
						<li>{name}</li>
					{/each}
				</ul>
				{#if names.length - 10 > 0}
					<p>... and {names.length - 10} more.</p>
				{/if}
			{/if}
			{#if warning}
				<p class="rounded-sm border border-rose-700 bg-rose-800/70 p-2 text-white">
					{warning}
				</p>
			{/if}
		</div>

		<div class="flex justify-end gap-4">
			<button type="submit" class="btn-rose" use:accelerator={'Enter'}>Delete</button>
			<button type="button" onclick={() => modal.close()} class="btn-slate">Cancel</button>
		</div>
	</form>
</Dialog>