<script lang="ts">
	import { OpenInNewWindow } from "radix-svelte-icons";
	import { Notification, deleteNotification } from "./shared.js";
	import { fly } from "svelte/transition";

	export let notification: Partial<Notification> & { uid: string };

	function focusSelector() {
		const element = document.querySelector(notification.selector as string) as HTMLElement | null;

		if (!element) {
			return
		}

		element.classList.add("bg-red-300")

		element.scrollIntoView({
			behavior: "smooth",
			block: "center",
			inline: "center"
		})

		element.focus()
		deleteNotification(notification.uid)

		setTimeout(() => {
			element?.classList.remove("bg-red-300")
		}, 3000)
	}
</script>

<div
	class="border rounded-lg bg-white shadow-md flex flex-row border-l-8" in:fly={{x: 200, duration: 200}} out:fly={{x: 200, duration: 200}}
	class:border-l-red-400={notification.type == "error"}
	class:border-l-blue-400={notification.type == "info"}
	class:border-l-green-400={notification.type == "success"}
	class:border-l-yellow-400={notification.type == "warning"}
>
	<div class="flex flex-col px-4 py-2">
		<h2 class="text-xl font-semibold flex flex-row items-center gap-3">{@html notification.message} {#if notification.selector}
			<button on:click={focusSelector} class="p-1.5 border rounded-lg" title="Anzeigen"><OpenInNewWindow size={18}></OpenInNewWindow></button>
		{/if}</h2>
		<p class="text-gray-600 text-lg"><slot></slot></p>
	</div>
	{#if notification.dismissable}
		<button
			class="border-l px-4 py-2 hover:bg-gray-100"
			on:click={() => {
				deleteNotification(notification.uid);
				if (notification.onUserDismiss) {
					notification.onUserDismiss()
				}
			}}>X</button
		>
	{/if}
</div>

<style>
	:global(a) {
		@apply text-blue-700;
	}

	:global(a:hover) {
		@apply underline;
	}

	:global(kbd) {
		@apply rounded-lg shadow-md border bg-gray-50 px-1.5 py-1 text-sm;
	}
</style>