<script>
  let { vapid, subscription, subscribe = 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 !== null}
  {#if subscription === null}
    <form class="form" onsubmit={onsubmit(subscribe)}>
      <button disabled={pending} type="submit">create push subscription</button>
    </form>
  {/if}
{:else}
  Waiting for VAPID key…
{/if}
