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

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

const accountStore = useAccountStore();
const Transaction = accountStore.Transactions.get(props.transactionid)!;

const payload = computed(() => JSON.stringify({
    date: Transaction.Date,
    payee: {
        Name: Transaction.Payee,
        ID: Transaction.PayeeID,
    },
    categoryId: Transaction.CategoryID,
    memo: Transaction.Memo,
    amount: Transaction.Amount,
    state: "Uncleared"
}));

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

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