<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";
import Modal from "../components/Modal.vue";

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

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

const accountName = ref("");
const accountOnBudget = ref(true);

function editAccount(e : any) {
    accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value);
}

function openEditAccount(e : any) {
    accountName.value = CurrentAccount.value?.Name ?? "";
    accountOnBudget.value = CurrentAccount.value?.OnBudget ?? true;
}
</script>

<template>
    <h1 class="inline">{{ CurrentAccount?.Name }}</h1>
    <Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
        <template v-slot:placeholder>✎</template>
        <div class="mt-2 px-7 py-3">
            <input
                class="border-2"
                type="text"
                v-model="accountName"
                placeholder="Account name"
                required
            />
        </div>
        <div class="mt-2 px-7 py-3">
            <input
                class="border-2"
                type="checkbox"
                v-model="accountOnBudget"
                required
            />
            <label>On Budget</label>
        </div>
    </Modal>

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