<script>
  import { fly } from 'svelte/transition';

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

  let displayAlerts = false;

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

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

<div id="block"><!--Prevent content slipping underneath the bar--></div>
<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
  <img src="/images/navigation/alert.svg" alt="" />
  {#if uniqueAlerts.length == 1}
    <p id="bartext">There is one active alert</p>
  {:else if uniqueAlerts.length > 1}
    <p id="bartext">
      There are {numberAsWord(uniqueAlerts.length)} active alerts
    </p>
  {:else}
    <p id="bartext">There are no 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>
  #block {
    height: 40px;
  }
  #bar {
    width: 100%;
    height: 40px;
    background-color: var(--main-alert-color);
    opacity: 1;
    position: fixed;
    width: 100%;
    top: 50px;
    left: 0px;
    z-index: 10;
  }
  img {
    height: 25px;
    width: 25px;
    position: absolute;
    left: 8px;
    top: 8px;
    margin: 0;
    padding: 0;
  }
  #bartext {
    color: white;
    margin: auto;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 0px;
    padding: 0px;
  }
  #arrow {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    position: absolute;
    margin-top: 0;
    right: 15px;
    top: 11px;
    border: none;
    background-color: transparent;
    transition-duration: 500ms;
    transition-delay: 00ms;
  }
  #arrow:focus {
    background-color: transparent;
  }
  #alerts {
    position: fixed;
    background-color: var(--main-alert-color);
    opacity: 0.9;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: clip;
    left: 0;
    top: 89px;
  }
  .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>
