<script lang="ts">
  import type { BindingLiquidSdk } from "@breeztech/breez-sdk-liquid/web";
  import { balances, getBreezSDK, initBalances } from "$lib/breez.svelte";
  import BalanceDisplay from "$lib/components/BalanceDisplay.svelte";
  import PaymentHistory from "$lib/components/PaymentHistory.svelte";
  import ReceiveDialog from "$lib/components/ReceiveDialog.svelte";
  import SendDialog from "$lib/components/SendDialog.svelte";
  import Button from "$lib/components/Button.svelte";
  import { refreshBalances } from "$lib/breez.svelte";
  import { onMount } from "svelte";

  let breezSDK = $state<BindingLiquidSdk | undefined>(undefined);

  let receiveDialogOpen = $state(false);
  let sendDialogOpen = $state(false);

  onMount(async () => {
    initBalances();
    breezSDK = await getBreezSDK();
  });

  function openReceiveDialog() {
    receiveDialogOpen = true;
  }

  function openSendDialog() {
    sendDialogOpen = true;
  }

  function onPaymentSent() {
    refreshBalances();
  }
</script>

<ReceiveDialog bind:open={receiveDialogOpen} />
<SendDialog bind:open={sendDialogOpen} onsent={onPaymentSent} />

<div class="container">
  <BalanceDisplay
    balance={balances.balance}
    pending={balances.pendingReceive - balances.pendingSend}
  />
  <div class="retro-card send-receive-buttons">
    <Button variant="primary" onclick={openReceiveDialog}>Receive</Button>
    <Button variant="danger" onclick={openSendDialog}>Send</Button>
  </div>

  <PaymentHistory />
</div>
