<script lang="ts">
  import Button from "$lib/components/Button.svelte";
  import Tabs from "$lib/components/Tabs.svelte";
  import CashuTab from "$lib/components/CashuTab.svelte";
  import ReceiveTab from "$lib/components/ReceiveTab.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)}>
  <div class="content">
    <h3>Receive</h3>

    <Tabs labels={["Bitcoin", "Lightning", "Liquid", "Cashu"]}>
      {#snippet children(idx)}
        {#if idx === 0}
          <ReceiveTab type="bitcoin" alt="Bitcoin Address" />
        {:else if idx === 1}
          <Tabs labels={["Address", "BOLT12"]}>
            {#snippet children(idx)}
              {#if idx === 0}
                <ReceiveTab type="lightning" alt="Lightning Address" />
              {:else}
                <ReceiveTab type="bolt12" alt="Lightning Address" />
              {/if}
            {/snippet}
          </Tabs>
        {:else if idx === 2}
          <ReceiveTab type="liquid" alt="Liquid Address" />
        {:else}
          <CashuTab />
        {/if}
      {/snippet}
    </Tabs>

    <Button onclick={closeDialog}>Confirm</Button>
  </div>
</dialog>

<style>
  .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>
