<script lang="ts">
    import { toast, toasts } from "./toast";
    import { fade } from "svelte/transition";
    import InfoIcon from "../icons/severity/InfoIcon.svelte";
    import WarningIcon from "../icons/severity/WarningIcon.svelte";
    import ErrorIcon from "../icons/severity/ErrorIcon.svelte";
    import SuccessIcon from "../icons/severity/SuccessIcon.svelte";
</script>

{#if $toasts.length >= 1}
    <div
        class="fixed bottom-0 right-0 z-50 flex w-full flex-col gap-2 p-4 text-white sm:w-96"
    >
        {#each $toasts as toastItem}
            <div
                class:bg-red-500={toastItem.type === "error"}
                class:bg-green-500={toastItem.type === "success"}
                class:bg-orange-500={toastItem.type === "warning"}
                class:bg-blue-500={toastItem.type === "info"}
                class="card flex items-center gap-3 border-contrast-900 px-4 py-3 shadow-md dark:border-contrast-100"
                transition:fade={{ duration: 200 }}
            >
                <div
                    class:text-red-900={toastItem.type === "error"}
                    class:text-green-900={toastItem.type === "success"}
                    class:text-orange-900={toastItem.type === "warning"}
                    class:text-blue-900={toastItem.type === "info"}
                    class="shrink-0"
                >
                    {#if toastItem.type === "info"}
                        <InfoIcon class="w-7"></InfoIcon>
                    {:else if toastItem.type === "warning"}
                        <WarningIcon class="w-7"></WarningIcon>
                    {:else if toastItem.type === "error"}
                        <ErrorIcon class="w-7"></ErrorIcon>
                    {:else if toastItem.type === "success"}
                        <SuccessIcon class="w-7"></SuccessIcon>
                    {/if}
                </div>

                <p class="grow">
                    {toastItem.text}
                </p>

                <button
                    on:click={() => toast.dismiss(toastItem.id)}
                    class="shrink-0"
                    aria-label="dismiss"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="w-6"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                </button>
            </div>
        {/each}
    </div>
{/if}
