<script lang="ts">
  import {Capacitor} from "@capacitor/core"
  import Button from "@lib/components/Button.svelte"
  import Spinner from "@lib/components/Spinner.svelte"
  import QRCode from "@app/components/QRCode.svelte"
  import type {Nip46Controller} from "@app/util/nip46"

  type Props = {
    controller: Nip46Controller
  }

  const {controller}: Props = $props()
  const {url, loading} = controller

  const openAegis = () => {
    controller.launchSigner("aegis")
  }

  const openNostrSigner = () => {
    controller.launchSigner("nostrsigner")
  }
</script>

{#if $url}
  {#if $loading}
    <div class="flex justify-center">
      <Spinner loading>Establishing connection...</Spinner>
    </div>
  {:else}
    <div class="flex flex-col items-center gap-2">
      <QRCode code={$url} />
      <p class="text-sm opacity-75">Scan with your signer to log in, or click to copy.</p>
      {#if Capacitor.isNativePlatform()}
        <div class="flex w-full flex-col gap-2">
          <Button class="btn btn-primary" onclick={openAegis}>Open in Aegis</Button>
          <Button class="btn" onclick={openNostrSigner}>Open in Nostr Signer</Button>
        </div>
      {/if}
    </div>
  {/if}
{/if}
