<script lang="ts">
  import settings from '$stores/settings';
  import { onMount } from 'svelte';

  let {
    notification = {},
    onRemove = () => {
      /* */
    },
    removed = $bindable(false)
  }: { notification?: { [key: string]: any }; onRemove?: () => void; removed?: boolean } = $props();

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

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

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

{#if !$settings.displayDisableNotifications}
  <div
    id="notification-container"
    class={removed ? 'fade-out' : 'fade-in'}
    onclick={remove}
    onkeydown={() => {
      return;
    }}
    role="button"
    tabindex="0"
  >
    {#if notification.description}
      <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
      <details
        open
        id="notification"
        onclick={(event) => event.preventDefault()}
        onkeydown={() => {
          return;
        }}
      >
        <summary>{@html notification.heading}</summary>

        {@html notification.description}
      </details>
    {:else}
      <div class="card" id="notification">
        {@html notification.heading}
      </div>
    {/if}
  </div>
{/if}

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

  #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%;
  }

  .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>
