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

const props = defineProps<{
    transactionid: string,
    index: number,
    withAccount: boolean,
}>();

const edit = ref(false);

const CurrentBudgetID = computed(() => useBudgetsStore().CurrentBudgetID);
const Reconciling = computed(() => useTransactionsStore().Reconciling);

const transactionsStore = useTransactionsStore();
const TX = transactionsStore.Transactions.get(props.transactionid)!;

function getStatusSymbol() {
    if(TX.Status == "Reconciled")
        return "✔";

    if(TX.Status == "Uncleared")
        return "*";

    return "✘";
}
</script>

<template>
  <tr
    v-if="!edit"
    class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
    :class="[index % 2 < 1 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
  >
    <td class="hidden md:block">
      {{ formatDate(TX.Date) }}
    </td>
    <td v-if="withAccount" class="pl-2 md:pl-0">
      {{ TX.Account }}
    </td>
    <td class="pl-2 md:pl-0">
      {{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
    </td>
    <td>
      {{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
    </td>
    <td>
      <a
        :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
      >{{ TX.Memo }}</a>
    </td>
    <td>
      <Currency
        class="block"
        :value="TX.Amount"
      />
    </td>
    <td class="text-right">
      {{ TX.GroupID ? "☀" : "" }}
      {{ getStatusSymbol() }}
      <a @click="edit = true;">✎</a>
      <Checkbox
        v-if="Reconciling && TX.Status != 'Reconciled'"
        v-model="TX.Reconciled"
      />
    </td>
  </tr>
  <TransactionEditRow
    v-if="edit"
    :transactionid="TX.ID"
    :with-account="withAccount"
    @save="edit = false"
  />
</template>

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