<script lang="ts">
	let {
		ondelete
	}: {
		ondelete: () => void;
	} = $props();

	let timeoutCount = $state(5);
	let timeout: undefined | number = undefined;
	let dialog: HTMLDialogElement;

	export function open() {
		if (dialog) dialog.showModal();
		timeoutCount = 5;

		function timeoutF() {
			if (timeoutCount === 0) {
				ondelete();
				timeout = undefined;
				return;
			}
			timeoutCount -= 1;
			timeout = setTimeout(timeoutF, 1000) as unknown as number;
		}

		timeout = setTimeout(timeoutF, 1000) as unknown as number;
	}

	// TODO: Auto delete after of 5 secs of inactivity
</script>

<dialog
	class="card"
	bind:this={dialog}
	onclose={() => {
		if (timeout) clearTimeout(timeout);
	}}
>
	<div>
		<div class="text-center py-10">
			<span class="bi bi-exclamation-triangle-fill text-8xl text-red-500"></span>
		</div>
		<h1 class="text-4xl py-5">Found Glassdoor Search</h1>
		<div class="flex justify-center gap-10">
			<button
				class="btn-primary"
				onclick={() => {
					dialog.close();
					if (timeout) clearTimeout(timeout);
				}}
			>
				Ignore
			</button>
			<button class="btn-danger" onclick={() => ondelete()}>
				Remove ({timeoutCount}) <span class="bi bi-clock-history animate-pulse"></span>
			</button>
		</div>
	</div>
</dialog>
