<script lang="ts" setup>
import { computed, ref } from "vue";
import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
import { Transaction, useAccountStore } from '../stores/budget-account'

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

const TX = ref<Transaction>({
    Date: new Date(),
    Memo: "",
    Amount: 0,
    Payee: "",
    PayeeID: undefined,
    Category: "",
    CategoryID: undefined,
    CategoryGroup: "",
    GroupID: "",
    ID: "",
    Status: "Uncleared",
    TransferAccount: "",
});

const payload = computed(() => JSON.stringify({
    budgetId: props.budgetid,
    accountId: props.accountid,
    date: TX.value.Date,
    payee: {
        Name: TX.value.Payee,
        ID: TX.value.PayeeID,
    },
    categoryId: TX.value.CategoryID,
    memo: TX.value.Memo,
    amount: TX.value.Amount.toString(),
    state: "Uncleared"
}));

const accountStore = useAccountStore();
function saveTransaction(e: MouseEvent) {
    e.preventDefault();
    accountStore.saveTransaction(payload.value);
}
</script>

<template>
    <tr>
        <td style="width: 90px;" class="text-sm">
            <input class="border-b-2 border-black" type="date" v-model="TX.Date" />
        </td>
        <td style="max-width: 150px;">
            <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" type="payees" />
        </td>
        <td style="max-width: 200px;">
            <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" type="categories" />
        </td>
        <td>
            <input class="block w-full border-b-2 border-black" type="text" v-model="TX.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="TX.Amount"
            />
        </td>
        <td style="width: 20px;">
            <input type="submit" @click="saveTransaction" value="Save" />
        </td>
        <td style="width: 20px;"></td>
    </tr>
</template>