<script>
  import { onMount } from "svelte";
  import * as api from '$lib/apiServer.js';
  import Toggle from '$lib/components/Toggle.svelte';

  let subscriptionJson = $state(null);

  function doSubscribe() {
    navigator.serviceWorker.ready
      .then(async (registration) => {
        // TODO: Get vapid key from remote.state instead:
        const response = await fetch("/api/vapid");
        // and if we fail to get it?
        const vapidPublicKey = await response.text();
        const convertedVapidKey = vapidPublicKey;
        return registration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: convertedVapidKey
        });
      }).then((subscription) => {
        const subJson = subscription.toJSON();
        subscriptionJson = {
          endpoint: subJson.endpoint,
          p256dh: subJson.keys.p256dh,
          auth: subJson.keys.auth,
        };
        apiServer.createPushSubscription(subscriptionJson);
      });
  }

  function doUnsubscribe() {
    navigator.serviceWorker.ready
      .then((registration) => {
        return registration.pushManager.getSubscription();
      }).then((subscription) => {
        const { endpoint } = subscription.toJSON();
        return subscription.unsubscribe()
          .then(() => {
            apiServer.deletePushSubscription({ endpoint });
            subscriptionJson = null;
          });
      });
  }

  function toggleSub() {
    if (subscriptionJson !== null) {
      doUnsubscribe();
    } else {
      doSubscribe();
    }
  }

  function testNotifications() {
    api.notifyMe();
  }

  onMount(() => {
    navigator.serviceWorker.ready.then((registration) => {
      return registration.pushManager.getSubscription();
    }).then((subscription) => {
      if (subscription) {
        subscriptionJson = JSON.parse(JSON.stringify(subscription));
      }
    });
  });
</script>

<h2>Notify me here</h2>

<p>
  {#if subscriptionJson === null}
    We won't notify you here.
  {:else}
    We will notify you here.
  {/if}
</p>
<button class="btn" onclick={toggleSub}>
  {#if subscriptionJson === null}
    Notify me!
  {:else}
    Stop notifying me!
  {/if}
</button>

<button class="btn" onclick={testNotifications}>
  Test notifications
</button>

<h2>Notify me when:</h2>

<p>These are currently unimplemented.</p>

<Toggle
    name="channel_created"
    text="A new channel is created"
    onclick={async () => {}}
/>
<Toggle
    name="message_arrives"
    text="A new message arrives in a channel"
    onclick={async () => {}}
/>
<Toggle
    name="message_arrives_username"
    text="A new message containing your username arrives in a channel"
    onclick={async () => {}}
/>
<Toggle
    name="message_arrives_keyword"
    text="A new message containing a keyword you have configured arrives in a channel"
    onclick={async () => {}}
/>
<Toggle
    name="own_message_stitched"
    text="A message you wrote is stitched"
    onclick={async () => {}}
/>
<Toggle
    name="flagged_message_stitched"
    text="A message you have flagged is stitched"
    onclick={async () => {}}
/>
