<script lang="ts">
  import { getBreezSDK } from "$lib/breez.svelte";
  import { send as sendPayment } from "$lib/payments";
  import Button from "$lib/components/Button.svelte";
  import type { InputType } from "@breeztech/breez-sdk-liquid/web";

  let { open = $bindable(), onsent }: { open: boolean; onsent: () => void } =
    $props();

  let destination = $state("");

  let amountSat = $state<number | "">("");
  let status = $state("");

  let requireAmount = $state(false);

  $effect(() => {
    (async () => {
      if (!destination.trim()) {
        requireAmount = false;
        return;
      }
      try {
        const breezSDK = await getBreezSDK();
        console.log(breezSDK);
        const parsed: InputType = await breezSDK.parse(destination);
        if (
          parsed.type === "bolt11" &&
          parsed.invoice.amountMsat !== undefined &&
          parsed.invoice.amountMsat > 0
        ) {
          requireAmount = false;
          amountSat = "";
        } else {
          requireAmount = true;
        }
      } catch {
        requireAmount = true;
      }
    })();
  });

  let dialogEl: HTMLDialogElement;

  async function handleSend() {
    const sendGenerator = sendPayment(destination, Number(amountSat) || 0);
    for await (const {
      status: sendStatus,
      error: sendError,
    } of sendGenerator) {
      if (sendError) return alert(sendError);
      status = sendStatus || "";
    }

    onsent();
    setTimeout(closeDialog, 1500);
  }

  $effect(() => {
    if (open) {
      status = "";
      destination = "";
      amountSat = "";
      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>Send</h3>

    <label>
      Destination
      <input
        type="text"
        bind:value={destination}
        placeholder="bolt12 / invoice / liquid / bitcoin address"
        required
      />
    </label>

    {#if requireAmount}
      <label>
        Amount (sats)
        <input
          type="number"
          min="0"
          step="1"
          bind:value={amountSat}
          placeholder="amount in sats"
        />
      </label>
    {/if}

    {#if status}
      <p class="status">{status}</p>
    {/if}

    <div class="actions">
      <Button variant="primary" onclick={handleSend} disabled={!destination}>
        Send
      </Button>
      <Button onclick={closeDialog}>Cancel</Button>
    </div>
  </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;
  }

  h3 {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 2px;
  }
  label {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  input {
    margin-top: 0.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-color);
  }
  .status {
    margin: 0.5rem 0 1rem;
    font-size: 0.7rem;
    color: var(--accent-color);
  }
  .actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
  }
</style>
