<script>
  let { vapid, subscription, subscribe = async () => null, ping = async () => null } = $props();
  let pending = $state(false);

  function onsubmit(callback) {
    return async (evt) => {
      evt.preventDefault();

      pending = true;
      try {
        await callback();
      } finally {
        pending = false;
      }
    };
  }
</script>

{#if !!vapid}
  {#if !subscription}
    <form class="form" onsubmit={onsubmit(subscribe)}>
      <button disabled={pending} type="submit">create push subscription</button>
    </form>
  {/if}
  <form class="form" onsubmit={onsubmit(ping)}>
    <button disabled={pending} type="submit">send test notification</button>
  </form>
{:else}
  Waiting for VAPID key…
{/if}
