<script lang="ts">
import { mapState } from "pinia";
import { defineComponent } from "vue"
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import { useAPI } from "../stores/api";
import { useAccountStore } from "../stores/budget-account";
import { useSessionStore } from "../stores/session";

export default defineComponent({
    data() {
        return {
            TransactionDate: new Date().toISOString().substring(0, 10),
            Payee: undefined as Suggestion | undefined,
            Category: undefined as Suggestion | undefined,
            Memo: "",
            Amount: 0
        }
    },
    components: { Autocomplete, Currency, TransactionRow },
    props: ["budgetid", "accountid"],
    computed: {
        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
    },
    methods: {
        saveTransaction(e : MouseEvent) {
            e.preventDefault();
            const api = useAPI();
            api.POST("/transaction/new", JSON.stringify({
                    budget_id: this.budgetid,
                    account_id: this.accountid,
                    date: this.$data.TransactionDate,
                    payee: this.$data.Payee,
                    category: this.$data.Category,
                    memo: this.$data.Memo,
                    amount: this.$data.Amount,
                    state: "Uncleared"
                }))
                .then(x => x.json());
        },
    }
})
</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>
            <tr>
                <td style="width: 90px;" class="text-sm">
                    <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
                </td>
                <td style="max-width: 150px;">
                    <Autocomplete v-model="Payee" type="payees" />
                </td>
                <td style="max-width: 200px;">
                    <Autocomplete v-model="Category" type="categories" />
                </td>
                <td>
                    <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
                </td>
                <td style="width: 80px;" class="text-right">
                    <input class="text-right block w-full border-b-2 border-black" type="currency" v-model="Amount" />
                </td>
                <td style="width: 20px;">
                    <input type="submit" @click="saveTransaction" value="Save" />
                </td>
                <td style="width: 20px;"></td>
            </tr>
            <TransactionRow v-for="(transaction, index) in TransactionsList"
                :transaction="transaction"
                :index="index" />
        </table>
</template>

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