<script lang="ts" setup>
import { computed, ref, onMounted } from "vue"
import Currency from "../components/Currency.vue";
import TransactionRow from "../components/TransactionRow.vue";
import TransactionInputRow from "../components/TransactionInputRow.vue";
import { useAccountStore } from "../stores/budget-account";
import EditAccount from "../dialogs/EditAccount.vue";
import Button from "../components/SimpleButton.vue";
import { useTransactionsStore } from "../stores/transactions";
import Modal from "../components/Modal.vue";
import Input from "../components/Input.vue";
import Checkbox from "../components/Checkbox.vue";
import { formatDate } from "../date";

defineProps<{
    budgetid: string
}>()

const modalInputRow = ref<typeof TransactionInputRow | null>(null);

function submitModal() {
  modalInputRow.value!.Save();
}

const accounts = useAccountStore();
const transactions = useTransactionsStore();

onMounted(() => {
  transactions.GetProblematicTransactions();
})
</script>

<template>
  <div class="grid grid-cols-[1fr_auto]">
    <div>
      <h1 class="inline">
        Problematic Transactions
      </h1>
    </div>
  </div>

  <table>
    <tr class="font-bold">
      <td class="hidden md:block" style="width: 90px;">Date</td>
      <td style="max-width: 200px;">Account</td>
      <td style="max-width: 150px;">Payee</td>
      <td style="max-width: 200px;">Category</td>
      <td>Memo</td>
      <td class="text-right">Amount</td>
    </tr>
    <TransactionRow
      v-for="(transaction, index) in transactions.ProblematicTransactionsList"
      :key="transaction.ID"
      :with-account="true"
      :transactionid="transaction.ID"
      :index="index"
    />
  </table>
</template>

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