<script setup lang="ts">

import {CreateLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
import {storeToRefs} from "pinia";
import {nextTick, ref} from "vue";
import {PencilSquareIcon} from "@heroicons/vue/24/outline";
import {formatIsk} from "@/formaters.ts";

const {ledgers} = storeToRefs(useLedgersStore());

const editModal = ref<typeof CreateLedgerModal>();
const editingLedgerId = ref("");

const openEdit = async (ledgerId: string) => {
  editingLedgerId.value = ledgerId;
  await nextTick();
  editModal.value?.open();
};

</script>

<template>
  <div class="mt-4">
    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
      <LedgerLabel :ledger="ledger" />
      <div class="flex grow">
        <span class="ms-2">{{ formatIsk(ledger.balance) }}</span>
      </div>
      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
    </div>
  </div>
  <CreateLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
</template>
