<script lang="ts" setup>
import { computed, ref } from "vue"
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account";

const props = defineProps<{
  budgetid: string
  accountid: string
}>()

const accountStore = useAccountStore();
const CurrentAccount = computed(() => accountStore.CurrentAccount);
const TransactionsList = computed(() => accountStore.TransactionsList);
</script>

<template>
    <h1>{{ CurrentAccount?.Name }}</h1>
    <p>
        Current Balance:
        <Currency :value="CurrentAccount?.Balance" />
    </p>
    <table>
        <tr class="font-bold">
            <td style="width: 90px;">Date</td>
            <td style="max-width: 150px;">Payee</td>
            <td style="max-width: 200px;">Category</td>
            <td>Memo</td>
            <td class="text-right">Amount</td>
            <td style="width: 20px;"></td>
            <td style="width: 20px;"></td>
        </tr>
        <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
        <TransactionRow
            v-for="(transaction, index) in TransactionsList"
            :transaction="transaction"
            :index="index"
        />
    </table>
</template>

<style>
table {
    width: 100%;
    table-layout: fixed;
}
.negative {
    color: red;
}
</style>