<script lang="ts" setup>
import { computed, ref, onMounted, watch } 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";
import Autocomplete from '../components/Autocomplete.vue'

defineProps<{
    budgetid: string
}>()

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

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

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

onMounted(() => {
  transactions.GetProblematicTransactions();
})

const filters = ref({
  Account: null,
  AccountID: null,
  Payee: null,
  PayeeID: null,
  Category: null,
  CategoryID: null,
});

watch(() => filters.value.AccountID + filters.value.PayeeID + filters.value.CategoryID, function() {
  if(!hasFilters.value)
    return;
  transactions.GetFilteredTransactions(filters.value.AccountID, filters.value.CategoryID, filters.value.PayeeID);
})

const hasFilters = computed(() => filters.value.AccountID != null || filters.value.PayeeID != null || filters.value.CategoryID);
const transactionsList = computed(() => {
  if (hasFilters.value){
    return transactions.FilteredTransactionsList;
  }
  return transactions.ProblematicTransactionsList;
})
</script>

<template>
  <div class="grid grid-cols-[1fr_auto]">
    <div>
      <h1 class="inline">
        {{ hasFilters ? "Filtered" : "Problematic" }} Transactions
      </h1>
    </div>
  </div>

  <div>
    Account: 
    <Autocomplete v-model:text="filters.Account" v-model:id="filters.AccountID" model="accounts" class="inline-block" /><br>
    Payee:
    <Autocomplete v-model:text="filters.Payee" v-model:id="filters.PayeeID" model="payees" class="inline-block" /><br>
    Category:
    <Autocomplete v-model:text="filters.Category" v-model:id="filters.CategoryID" model="categories" class="inline-block" /><br>
  </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 transactionsList"
      :key="transaction.ID"
      :with-account="true"
      :transactionid="transaction.ID"
      :index="index"
    />
  </table>
</template>

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