<script lang="ts" setup>
import { computed, ref } from "vue";
import { useBudgetsStore } from "../stores/budget";
import { Transaction, useAccountStore } from "../stores/budget-account";
import Currency from "./Currency.vue";
import TransactionEditRow from "./TransactionEditRow.vue";
import { formatDate } from "../date";

const props = defineProps<{
    transaction: Transaction,
    index: number,
}>();

const edit = ref(false);

const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
const Reconciling = computed(() => useAccountStore().Reconciling);
</script>

<template>
    <tr
        v-if="!edit"
        class="{{new Date(transaction.Date) > new Date() ? 'future' : ''}}"
        :class="[index % 6 < 3 ? 'bg-gray-300' : 'bg-gray-100']"
    >
        <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
        <td>{{ formatDate(transaction.Date) }}</td>
        <td>{{ transaction.TransferAccount ? "Transfer : " + transaction.TransferAccount : transaction.Payee }}</td>
        <td>{{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}</td>
        <td>
            <a
                :href="'/budget/' + CurrentBudgetID + '/transaction/' + transaction.ID"
            >{{ transaction.Memo }}</a>
        </td>
        <td>
            <Currency class="block" :value="transaction.Amount" />
        </td>
        <td>{{ transaction.Status == "Reconciled" ? "✔" : (transaction.Status == "Uncleared" ? "" : "*") }}</td>
        <td class="text-right">
            {{ transaction.GroupID ? "☀" : "" }}
            <a @click="edit = true;">✎</a>
        </td>
        <td v-if="Reconciling && transaction.Status != 'Reconciled'">
            <input type="checkbox" v-model="transaction.Reconciled" />
        </td>
    </tr>
    <TransactionEditRow v-if="edit" :transactionid="transaction.ID" />
</template>

<style>
td {
    overflow: hidden;
    white-space: nowrap;
}
</style>