<script>
  import { setContext, onMount } from "svelte";
  import { onNavigate } from '$app/navigation';
  import { page } from '$app/state';
  import '../app.css';
  import logo from '$lib/assets/logo.png';

  /* ==================== Start subscription library-esque ==================== */
  function doSubscribe() {
    navigator.serviceWorker.ready
      .then(async(registration) => {
        console.debug("Beginning subscription");
        const response = await fetch("/api/vapid");
        // and if we fail to get it?
        const vapidPublicKey = await response.text();
        // Chrome doesn't accept the base64-encoded (string) vapidPublicKey yet
        // urlBase64ToUint8Array() is defined in /tools.js
        // const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
        const convertedVapidKey = vapidPublicKey;
        // Subscribe the user
        return registration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: convertedVapidKey
        });
      }).then((subscription) => {
        debugger;
        console.debug("Subscribed", subscription.endpoint);
        return fetch("/api/register", {
          method: "post",
          headers: { "Content-type": "application/json" },
          body: JSON.stringify({ subscription: subscription })
        });
      });
  }

  async function doUnsubscribe() {
    navigator.serviceWorker.ready
      .then((registration) => {
        return registration.pushManager.getSubscription();
      }).then((subscription) => {
        return subscription.unsubscribe()
          .then(function() {
            console.log("Unsubscribed", subscription.endpoint);
            return fetch("/api/unregister", {
              method: "post",
              headers: { "Content-type": "application/json" },
              body: JSON.stringify({ subscription })
            });
          });
      });
  }

  function notifyMe() {
    fetch("/api/echo", {
      method: "post",
      headers: { "Content-type": "application/json" },
      body: JSON.stringify({ msg: "oople doople" })
    });
  }

  onMount(() => {
    navigator.serviceWorker.ready.then((registration) => {
      return registration.pushManager.getSubscription();
    }).then((subscription) => {
      if (subscription) {
        console.debug("Already subscribed", subscription.endpoint);
      } else {
        doSubscribe();
      }
    });
  });
  /* ==================== END ==================== */

  const session = $derived(page.data.session);
  let pageContext = $state({
    showMenu: false,
  });
  setContext('page', pageContext);

  function toggleMenu(event) {
    event.preventDefault();
    pageContext.showMenu = !pageContext.showMenu;
  }

  onNavigate(() => {
    pageContext.showMenu = false;
  });

  let { children } = $props();
</script>

<div class="app-bar">
  <div class="lead">
    <button onclick={toggleMenu}>
      <img alt="logo" src={logo} />
    </button>
  </div>
  <a href="/">pilcrow</a>
  <button onclick="{notifyMe}">
    notify
  </button>
  <button onclick="{doUnsubscribe}">
    unsub
  </button>
  <div class="trail">
    {#if session}
      <div>
        <a href="/me">@{session.currentUser.name}</a>
      </div>
    {/if}
  </div>
</div>

{@render children?.()}
