<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";
import Modal from "../components/Modal.vue";
import Input from "../components/Input.vue";

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-[1fr_auto]">
        <div>
            <h1 class="inline">
                {{ accounts.CurrentAccount?.Name }}
            </h1>
            <EditAccount />
        </div>

        <div class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
                Working:
                <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
            </span>

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

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

            <span v-if="transactions.Reconciling" class="contents">
                <Button @click="submitReconcilation"
                    class="bg-blue-500 p-1 whitespace-nowrap flex-1">
                    My current balance is&nbsp;
                    <Currency :value="transactions.ReconcilingBalance" />
                </Button>

                <Button @click="createReconcilationTransaction"
                    class="bg-orange-500 p-1 whitespace-nowrap flex-1">
                    No, it's:
                    <Input
                        class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
                        type="number"
                        v-model="TargetReconcilingBalance"
                    />
                    (Difference
                    <Currency
                        :value="transactions.ReconcilingBalance - TargetReconcilingBalance"
                    />)
                </Button>
                <Button class="bg-red-500 p-1 flex-1" @click="cancelReconcilation">Cancel</Button>
            </span>
        </div>
    </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>
    <div class="md:hidden">
        <Modal>
            <template v-slot:placeholder>
                <Button class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2">+</Button>
            </template>
            <TransactionInputRow
                class="grid grid-cols-2"
                :budgetid="budgetid"
                :accountid="accountid"
            />
        </Modal>
    </div>
</template>

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