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

	export let isOpen: boolean;
	export let callback: () => void;

	export let names: string[];
	export let typename: string;
	export let warning: string | undefined = undefined;
	const multiple = names.length > 1;
	const formattedTypename = multiple ? `${typename}s` : typename;
	const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0];

	function confirm() {
		callback();
		closeModal();
	}
</script>

<Dialog {isOpen}>
	<svelte:fragment slot="header">
		<h2>Delete {formattedTypename}</h2>
	</svelte:fragment>
	<form on:submit|preventDefault={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}
						<li>{name}</li>
					{/each}
				</ul>
				{#if names.length - 10 > 0}
					<p>... and {names.length - 10} more.</p>
				{/if}
			{/if}
			{#if warning}
				<p class="font-medium text-red-600">Warning: {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" on:click={closeModal} class="btn-slate">Cancel</button>
		</div>
	</form>
</Dialog>