<script>
    import { IconAlertCircle } from "@tabler/icons-svelte";
    import { fly } from "svelte/transition";

    export let alerts = [];
    $: uniqueAlerts = [...new Set(alerts)];

    let displayAlerts = false;

    async function alertsToggle() {
        displayAlerts = !displayAlerts;
    }

    function numberAsWord(number = 0) {
        const words = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
        let word = words[number];
        if (word) {
            return word;
        }
        return number;
    }
</script>

<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
    <span class="image"><IconAlertCircle /></span>
    {#if uniqueAlerts.length == 1}
        <p id="bartext">There is one active alert</p>
    {:else}
        <p id="bartext">
            There are {numberAsWord(uniqueAlerts.length)} active alerts
        </p>
    {/if}
    <p id="arrow" class:displayAlerts>V</p>
</div>
{#if displayAlerts}
    <div id="alerts" in:fly={{ y: -200, duration: 500 }} out:fly={{ y: -200, duration: 800 }}>
        {#each uniqueAlerts as msg}
            <p class="alert">{@html msg}</p>
        {/each}
    </div>
{/if}

<style>
    #bar {
        position: relative;
        margin-top: 0;
        padding: 0;
        width: 100%;
        height: 40px;
        background-color: var(--main-alert-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;
    }
    .image {
        margin-left: 15px;
        margin-top: 4px;
    }
    #bartext {
        color: white;
        margin: auto;
        font-weight: 600;
        margin: 0 0 0 0;
        padding: 0;
    }
    #arrow {
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        border: none;
        margin-right: 15px;
        background-color: transparent;
        transition-duration: 500ms;
        transition-delay: 00ms;
    }
    #arrow:focus {
        background-color: transparent;
    }
    #alerts {
        position: absolute;
        background-color: var(--main-alert-color);
        opacity: 0.9;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: clip;
        left: 0;
        top: 89px;
        z-index: 1;
    }
    .alert {
        color: white;
        text-align: center;
        width: 80%;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .displayAlerts {
        transition-duration: 500ms;
        transition-delay: 400ms;
        transform: rotate(180deg);
    }
</style>
