<script lang="ts">
	import { ExclamationCircle } from 'svelte-heros-v2';
	import { fly } from 'svelte/transition';
	import { onDestroy } from 'svelte';

	export let timeout = 2000;
	export let show = false;

	export function reset() {
		progressValue = 1;
	}

	let progressValue = 100;
	let intervalClear: ReturnType<typeof setInterval> | undefined;

	function startTimout() {
		intervalClear = setInterval(() => {
			if (++progressValue > 100) {
				clearInterval(intervalClear);
				show = false;
				progressValue = 100;
			}
		}, timeout / 100);
	}

	$: if (show) {
		progressValue = 0;
		startTimout();
	}

	onDestroy(() => clearInterval(intervalClear));
</script>

{#if show && progressValue !== 0}
	<div
		in:fly={{ x: 0, duration: 200 }}
		out:fly={{ x: 400, duration: 400 }}
		class="toast"
		on:mouseenter={() => {
			clearInterval(intervalClear);
			progressValue = 1;
		}}
		on:mouseleave={startTimout}
		role="alert"
	>
		<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
			<div class="flex gap-2 z-10">
				<ExclamationCircle />
				<slot />
			</div>
			<progress
				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
				value={progressValue}
				max="100"
			/>
		</div>
	</div>
{/if}
