<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";

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

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

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

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

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

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

<template>
    <h1 class="inline">{{ accounts.CurrentAccount?.Name }}</h1>
    <EditAccount />
    <br />

    <span>
        Current Balance:
        <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
    </span>

    <span>
        Cleared Balance:
        <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
    </span>

    <span v-if="accounts.Reconciling" class="border-2 block bg-gray-200 rounded-lg p-2">
        Is <Currency :value="accounts.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="accounts.ReconcilingBalance - TargetReconcilingBalance" />
        <Button
            class="bg-orange-500 mx-3"
            v-if="Math.abs(accounts.ReconcilingBalance - TargetReconcilingBalance) > 0.01"
            @click="createReconcilationTransaction"
        >Create reconciling Transaction</Button>
        <Button
            class="bg-red-500 mx-3"
            @click="cancelReconcilation"
        >Cancel</Button>
    </span>
    <span v-if="!accounts.Reconciling">
        Reconciled Balance:
        <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
        <Button class="bg-blue-500" @click="accounts.Reconciling = true" v-if="!accounts.Reconciling">Reconcile</Button>
    </span>
    <table>
        <tr class="font-bold">
            <td 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: 20px;"></td>
            <td style="width: 40px;"></td>
            <td style="width: 20px;" v-if="accounts.Reconciling">
                <input type="checkbox" @input="setReconciled" />
            </td>
        </tr>
        <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
        <TransactionRow
            v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID"
            :transaction="transaction"
            :index="index"
        />
    </table>
</template>

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