<script context="module"></script>

<script>import { mdiAlertCircleOutline, mdiAlertOutline, mdiCheckCircleOutline, mdiInformationOutline } from "@mdi/js";
import { createEventDispatcher } from "svelte";
import Icon from "./Icon.svelte";
import { fadeDown, fadeUp, slide } from "./transitions";
export let type = "info";
export let title = "";
export let description = "";
$: iconPath = {
  success: mdiCheckCircleOutline,
  info: mdiInformationOutline,
  warn: mdiAlertCircleOutline,
  danger: mdiAlertOutline
}[type];
export let dismissible = false;
export let displayIcon = false;
export let position = "inline";
let positionClass = "";
export let hovered = false;
let className = "";
export { className as class };
const dispatch = createEventDispatcher();
$: transition = position === "top" ? fadeDown : position === "bottom" ? fadeUp : slide;
$: positionClass = position === "top" ? "top" : position === "bottom" ? "bottom" : "";
export function close() {
  dispatch("close");
}
function onMouseEnter() {
  hovered = true;
}
function onMouseLeave() {
  hovered = false;
  dispatch("unhovered");
}
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
  class="alert {type} {className} {positionClass}"
  class:dismissible
  on:mouseenter={onMouseEnter}
  on:mouseleave={onMouseLeave}
  transition:transition|local={{ duration: 200 }}
>
  {#if dismissible}
    <button type="button" class="button" on:click={close}>&times;</button>
  {/if}
  {#if displayIcon}
    <div class="icon">
      <slot name="icon"><Icon path={iconPath} size="22" /></slot>
    </div>
  {/if}
  <div class="title">{title}</div>
  <div class="description">{description}</div>
  <div class="action">
    <slot name="action"></slot>
  </div>
  <div class={displayIcon ? 'display-icon' : ''}>
    <slot />
  </div>
</div>

<style>
  .alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    margin-bottom: 1rem;
    width: 100%;
    border-radius: var(--border-radius-medium);
    border: 1px solid;
    padding: var(--gap-standard) var(--gap-baseline);
    gap: 0 var(--gap-standard);
    position: relative;
  }
  .icon {
    grid-area: 1 / 1 / 3 / 2;
    display: flex;
  }

  .display-icon {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    align-items: center;
  }

  button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }
  .button {
    position: absolute;
    right: var(--border-radius-default);
    top: var(--border-radius-default);
    font-weight: bold;
    font-size: var(--heading-desktop-h5);
    line-height: var(--heading-desktop-h5);
    opacity: var(--text-hover-light);
    background-color: transparent;
    width: var(--heading-desktop-h5);
    height: var(--heading-desktop-h5);
  }

  .button:hover {
    opacity: var(--text-hover-dark);
  }

  .title {
    grid-area: 1 / 2 / 2 / 3;
    line-height: var(--heading-desktop-h5);
    font-weight: var(--text-medium);
    font-size: var(--text-regular-medium);
  }
  .description {
    grid-area: 2 / 2 / 3 / 3;
    font-size: var(--heading-desktop-h6) * 2 / 3;
    line-height: var(--heading-desktop-h6);
  }
  .action {
    grid-area: 1 / 3 / 3 / 4;
    display: flex;
    justify-content: flex-end;
  }

  .success {
    border: var(--border-single-success);
    background-color: #e6ffec;
    color: var(--success-green-700);
  }
  .success .button {
    color: var(--success-green-700);
  }

  .warn {
    border: var(--border-single-warn);
    background-color: var(--bg-warn);
    color: var(--text-warn);
  }
  .warn .button {
    color: var(--text-warn);
  }

  .info {
    border: 1px solid gray;
    background-color: #f4f4f4;
    color: gray;
  }
  .info .button {
    color: gray;
  }

  .danger {
    border: var(--border-single-error);
    background-color: var(--bg-error);
    color: var(--text-error);
  }
  .danger .button {
    color: var(--text-error);
  }
  .top {
    position: fixed;
    left: 3rem;
    right: 3rem;
    top: 2rem;
    z-index: 50;
    box-shadow: var(--shadow-sm);
    width: calc(100% - 6rem);
  }
  .bottom {
    position: fixed;
    left: 3rem;
    right: 3rem;
    bottom: 2rem;
    z-index: 50;
    box-shadow: var(--shadow-sm);
    width: calc(100% - 6rem);
  }
  .dismissible {
    padding-right: 0.5rem;
  }
</style>
