<script lang="ts">
	import { onMount } from 'svelte';

	export let notification: { [key: string]: any } = {};
	export let onRemove: () => void = () => {
		return;
	};
	export let removed = false;

	onMount(() => setTimeout(remove, notification.duration));

	const remove = () => {
		removed = true;

		setTimeout(onRemove, 150);
	};
</script>

<div id="notification-container" class={removed ? 'fade-out' : 'fade-in'}>
	{#if notification.description}
		<details open id="notification">
			<summary>{@html notification.heading}</summary>

			{@html notification.description}

			<br />

			<div class="button-container">
				<button on:click={remove} class="button-hide">Hide</button>
			</div>
		</details>
	{:else}
		<div class="card" id="notification">
			{@html notification.heading}

			&nbsp; &nbsp;

			<div class="button-container">
				<button on:click={remove} class="button-hide">Hide</button>
			</div>
		</div>
	{/if}
</div>

<style>
	#notification-container {
		margin: 1rem 1rem 0 0;
		float: right;
	}

	#notification {
		background-color: var(--base001);
		box-shadow: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, 0 0 0 4px var(--base0E);

		widows: 100%;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
	}

	#notification > div {
		display: inline;
	}

	.button-hide {
		float: right;
	}

	.button-container::after {
		content: '';
		clear: both;
		display: table;
	}

	.fade-in {
		animation: fadeInAnimation ease 300ms;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	.fade-out {
		animation: fadeOutAnimation ease 150ms;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes fadeInAnimation {
		100% {
			opacity: 1;
		}
		1% {
			opacity: 0.01;
		}
		0% {
			opacity: 0;
		}
	}

	@keyframes fadeOutAnimation {
		0% {
			opacity: 1;
		}
		99% {
			opacity: 0.01;
		}
		100% {
			opacity: 0;
		}
	}
</style>
