<script context="module" lang="ts">

  export type Header = {
    addMessage (message: string, options?: Partial<MessageOptions>): void
  };

  type HeaderMessage = {
    message: string,
    options: MessageOptions,
    dismiss: () => void,
  }

  type MessageOptions = {
    time: number,
    dismissable: boolean,
  };

</script>

<script lang="ts">
  import { page } from '$app/stores';
  import logo from '/rose.apng';
  import boowomp from '/wilted-flower.apng';
  import close from '$lib/assets/close.svg?raw';
  import { setContext } from "svelte";
  import { fly } from "svelte/transition";
  import { readable, writable } from "svelte/store";
  import { isNavigating } from "$lib/navigation.ts";
  import { onMount } from 'svelte';
 
  const newestMessage = writable<HeaderMessage|null>(null);

  var Rose = chrome ? boowomp : logo;

  const currentMessage = writable<HeaderMessage|null>(null, (set) => {
    let $currentMessage: HeaderMessage|null = null;
    let currentTimeout: number|null = null;

    const dismiss = () => {
      if (currentTimeout == null) clearTimeout(currentTimeout);
      $currentMessage = null;
      set(null);
    };

    const unsubscribe = newestMessage.subscribe(($newestMessage) => {
      if ($newestMessage == null) return;

      if ($currentMessage != null) dismiss();

      $currentMessage = $newestMessage;
      $currentMessage.dismiss = dismiss;
      if ($currentMessage.options.dismissable)
	currentTimeout = setTimeout(dismiss, $currentMessage.options.duration);
      set($currentMessage);
    });

    return () => {
      unsubscribe();
      dismiss();
    };
  });

    setContext<Header>("Header", {
    addMessage(...args: any[]) {

      let [ message, options ] = args as [string, Partial<MessageOptions>|undefined];
      options ??= { dismissable: true, duration: 5000 };
      options.dismissable ??= true;
      options.duration ??= 5000;
      newestMessage.set({
        type: "message",
        message,
        options: options as MessageOptions,
        dismiss: void {},
      });

    },
  });
  
  var chrome: boolean = false;
  onMount(async () => {
    chrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    Rose = chrome ? boowomp : logo;
  });
</script>

<div class="main">
  <header>
    <div class="corner">
      <a href="/" class="name">
	{#if $isNavigating}
	  <span class="loader"></span>
	{:else}
	    <img id="logo" src={Rose} alt="rose"/>
	{/if}
	<p>rose</p>
      </a>
    </div>

    {#if $currentMessage != null}
      <div class="center" transition:fly>
	<p>
	  {$currentMessage.message}
	</p>
	{#if $currentMessage.options.dismissable}
	  <button
	    class="dismiss"
	    on:click={$currentMessage.dismiss}>
	    <span class="icon">{@html close}</span>
	  </button>
	{/if}
      </div>
    {/if}

    <nav>
      <ul>
	<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
	  <a href="/">Home</a>
	</li>
	<li aria-current={$page.url.pathname === '/projects' ? 'page' : undefined}>
	  <a href="/projects">Projects</a>
	</li>
      </ul>
    </nav>
  </header>
  <slot />
</div>

<style lang="scss">
  @use "sass:color";

  @import "@fontsource-variable/playwrite-hr";

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    position: -webkit-sticky;
    top: 0;
    z-index: 99;
    background-color: color.change(white, $alpha: 0.9);
    height: 3em;
  }

  .name {
    font-family: 'Playwrite HR Variable', cursive;
    font-size: 1.3em;
    color: #150129;
    padding-bottom: 6px;
  }

  .loader {
    width: 1.5em;
    height: 1.5em;
    border: 5px solid transparent;
    border-bottom-color: #E2122D;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }

  @keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .corner {
    height: 3em;
    margin-bottom: 0px;

    & a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-decoration: none;

      &:visited {
	color: black;
      }
      &:hover &:active {
	color: black;
      }

      & p {
	padding-left: 4px;
      }
    }

    & img {
      width: 1.5em;
      height: 1.5em;
      object-fit: contain;
    }

  }

  .center {
    display: flex;
    flex-direction: row;
    background-color: #000000ac;
    border-radius: 100px;
    align-items: center;
    height: 2.5em;

    & > .dismiss {
      min-height: 2.3em;
      min-width: 2.3em;
      background: transparent;
      border: none;
      border-radius: 9999px;
      margin-right: 10px;

      &:hover { background: #ffffff30; }
      &:active { background: #ffffff60; }

      & > :global(span) {
	justify-content: center;
	align-content: center;
	width: 100%;
	height: 100%;
	fill: #ffffff;
	transform: translate(0, 0.125em);
	& > :global(svg) {
	  width: 16px;
          height: 16px;
          object-fit: contain;
          text-align: center;
          fill: #ffffff;
	}
      }
    }

    & p {
      color: #fff;
      margin-left: 10px;
      margin-right: 10px;
    }

  }

  nav {
    display: flex;
    justify-content: right;
    font-size: 1.2em;
    padding-right: 10px;
    object-fit: contain;
  }

  ul {
    position: relative;
    padding: 0;
    margin: 0;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    background-size: contain;
  }

  li {
    position: relative;
    height: 100%;
  }

  li[aria-current='page']::before {
    --size: 6px;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: calc(50% - var(--size));
    border: var(--size) solid transparent;
    border-top: var(--size) solid var(--color-theme-1);
  }

  nav a {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0 0.5rem;
    color: #150129;
    font-weight: 700;
    font-size-adjust: 0.3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.2s linear;
  }

  a:hover {
    color: var(--color-theme-1);
  }

  @media (prefers-color-scheme: dark) {
    /* If the operating system is using dark mode, then apply this CSS */
    header {
      background-color: color.change(#292b33, $alpha: 0.9);
    }

    a:link:not(.permalink),a:visited:not(.permalink) {
      color: #b9cffb;
    }

    .name {
      color: #f5f5f5;
    }
  }

</style>
