<script lang="ts">
  import Tabs from "$lib/components/Tabs.svelte";
  import CashuTab from "$lib/components/CashuTab.svelte";
  import ReceiveTab from "$lib/components/ReceiveTab.svelte";
  import { walletState } from "$lib/wallet.svelte";

  let { open = $bindable() }: { open: boolean } = $props();

  let dialogEl: HTMLDialogElement | null;

  $effect(() => {
    if (open) dialogEl?.showModal();
    else dialogEl?.close();
  });

  function closeDialog() {
    open = false;
  }
</script>

<dialog bind:this={dialogEl} onclose={() => (open = false)}>
  <button class="close" onclick={closeDialog}>&times;</button>
  <div class="content">
    <h3>Receive</h3>

    {#if $walletState.open}
      <Tabs labels={["Lightning", "Liquid", "Cashu", "Bitcoin"]}>
        {#snippet children(idx)}
          {#if idx === 0}
            <Tabs labels={["Address", "BOLT12"]}>
              {#snippet children(idx)}
                {#if idx === 0}
                  <ReceiveTab type="lightning" />
                {:else}
                  <ReceiveTab type="bolt12" />
                {/if}
              {/snippet}
            </Tabs>
          {:else if idx === 1}
            <ReceiveTab type="liquid" />
          {:else if idx === 2}
            <CashuTab />
          {:else}
            <p>
              <b>Warning</b>: This is a bitcoin mainnet address<br />
              Due to the way PortalBTC works, we cannot support receiving amounts
              less than 25_000 sats; please use lightning, liquid, or cashu for such
              amounts. Amounts lower than 25_000 sats sent to this address will become
              unrecoverable.
            </p>
            <ReceiveTab type="bitcoin" />
          {/if}
        {/snippet}
      </Tabs>
    {/if}
  </div>
</dialog>

<style>
  .close {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--accent-color);
    cursor: pointer;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  h3 {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 2px;
  }
</style>
