<script lang="ts" setup>
import { computed, ref } 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/Button.vue";
import { useTransactionsStore } from "../stores/transactions";

defineProps<{
    budgetid: string
    accountid: string
}>()

const accounts = useAccountStore();
const transactions = useTransactionsStore();
const TargetReconcilingBalance = ref(0);

function setReconciled(event: Event) {
    const target = event.target as HTMLInputElement;
    transactions.SetReconciledForAllTransactions(target.checked);
}

function cancelReconcilation() {
    transactions.SetReconciledForAllTransactions(false);
    transactions.Reconciling = false;
}

function submitReconcilation() {
    transactions.SubmitReconcilation(0);
    transactions.Reconciling = false;
}

function createReconcilationTransaction() {
    const diff = TargetReconcilingBalance.value - transactions.ReconcilingBalance;
    transactions.SubmitReconcilation(diff);
    transactions.Reconciling = false;
}
</script>

<template>
    <div class="grid grid-cols-2">
        <h1 class="inline">
            {{ accounts.CurrentAccount?.Name }}
            <EditAccount />
        </h1>

        <div class="text-right">
            <span class="border-2 rounded-lg p-1 whitespace-nowrap">
                Working:
                <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
            </span>

            <span class="border-2 rounded-lg p-1 ml-2 whitespace-nowrap">
                Cleared:
                <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
            </span>

            <span
                class="border-2 border-blue-500 rounded-lg bg-blue-500 ml-2 p-1 whitespace-nowrap"
                v-if="!transactions.Reconciling"
                @click="transactions.Reconciling = true"
            >
                Reconciled:
                <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
            </span>
        </div>

        <span v-if="transactions.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
            Is
            <Currency :value="transactions.ReconcilingBalance" />your current balance?
            <Button class="bg-blue-500 mx-3" @click="submitReconcilation">Yes!</Button>
            <br />No, it's:
            <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
            Difference:
            <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
            <Button
                class="bg-orange-500 mx-3"
                v-if="Math.abs(transactions.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
                @click="createReconcilationTransaction"
            >Create reconciling Transaction</Button>
            <Button class="bg-red-500 mx-3" @click="cancelReconcilation">Cancel</Button>
        </span>
    </div>

    <table>
        <tr class="font-bold">
            <td class="hidden md:block" style="width: 90px;">Date</td>
            <td style="max-width: 150px;">Payee</td>
            <td style="max-width: 200px;">Category</td>
            <td>Memo</td>
            <td class="text-right">Amount</td>
            <td style="width: 80px;">
                <input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
            </td>
        </tr>
        <TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />
        <TransactionRow
            v-for="(transaction, index) in transactions.TransactionsList"
            :key="transaction.ID"
            :transactionid="transaction.ID"
            :index="index"
        />
    </table>
</template>

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