<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref } from "vue"
import { useRouter } from "vue-router";
import { DELETE, POST } from "../api";
import { useBudgetsStore } from "../stores/budget";
import { useSessionStore } from "../stores/session";

const transactionsFile = ref<File | undefined>(undefined);
const assignmentsFile = ref<File | undefined>(undefined);

const filesIncomplete = computed(() => transactionsFile.value == undefined || assignmentsFile.value == undefined);
onMounted(() => {
    useSessionStore().setTitle("Settings");
});

function gotAssignments(e: Event) {
    const input = (<HTMLInputElement>e.target);
    if (input.files != null)
        assignmentsFile.value = input.files[0];
}
function gotTransactions(e: Event) {
    const input = (<HTMLInputElement>e.target);
    if (input.files != null)
        transactionsFile.value = input.files[0];
};
function deleteBudget() {
    const currentBudgetID = useBudgetsStore().CurrentBudgetID;
    if (currentBudgetID == null)
        return;

    DELETE("/budget/" + currentBudgetID);

    const budgetStore = useSessionStore();
    budgetStore.Budgets.delete(currentBudgetID);
    useRouter().push("/")
};
function clearBudget() {
    const currentBudgetID = useBudgetsStore().CurrentBudgetID;
    POST("/budget/" + currentBudgetID + "/settings/clear", null)
};
function cleanNegative() {
    // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
};
function ynabImport() {
    if (transactionsFile.value == undefined || assignmentsFile.value == undefined)
        return

    let formData = new FormData();
    formData.append("transactions", transactionsFile.value);
    formData.append("assignments", assignmentsFile.value);
    const budgetStore = useBudgetsStore();
    budgetStore.ImportYNAB(formData);
};
</script>

<template>
    <v-container>
        <h1>Danger Zone</h1>
        <v-row>
            <v-col cols="12" md="6" xl="3">
                <v-card>
                    <v-card-header>
                        <v-card-header-text>
                            <v-card-title>Clear Budget</v-card-title>
                            <v-card-subtitle>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</v-card-subtitle>
                        </v-card-header-text>
                    </v-card-header>
                    <v-card-actions class="justify-center">
                        <v-btn @click="clearBudget">Clear budget</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
            <v-col cols="12" md="6" xl="3">
                <v-card>
                    <v-card-header>
                        <v-card-header-text>
                            <v-card-title>Delete Budget</v-card-title>
                            <v-card-subtitle>This deletes the whole bugdet including all transactions, assignments, accounts and categories. Not undoable!</v-card-subtitle>
                        </v-card-header-text>
                    </v-card-header>
                    <v-card-actions class="justify-center">
                        <v-btn @click="deleteBudget">Delete budget</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
            <v-col cols="12" md="6" xl="3">
                <v-card>
                    <v-card-header>
                        <v-card-header-text>
                            <v-card-title>Fix all historic negative category-balances</v-card-title>
                            <v-card-subtitle>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</v-card-subtitle>
                        </v-card-header-text>
                    </v-card-header>
                    <v-card-actions class="justify-center">
                        <v-btn @click="cleanNegative">Fix negative</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
            <v-col cols="12" xl="6">
                <v-card>
                    <v-card-header>
                        <v-card-header-text>
                            <v-card-title>Import YNAB Budget</v-card-title>
                        </v-card-header-text>
                    </v-card-header>

                    <label for="transactions_file">
                        Transaktionen:
                        <input type="file" @change="gotTransactions" accept="text/*" />
                    </label>
                    <br />
                    <label for="assignments_file">
                        Budget:
                        <input type="file" @change="gotAssignments" accept="text/*" />
                    </label>

                    <v-card-actions class="justify-center">
                        <v-btn :disabled="filesIncomplete" @click="ynabImport">Importieren</v-btn>
                    </v-card-actions>
                </v-card>
            </v-col>
        </v-row>
        <v-card></v-card>
    </v-container>
</template>