<script>
import { TITLE } from "../store/mutation-types"

export default {
    data() {
        return {
            transactionsFile: null,
            assignmentsFile: null
        }
    },
    computed: {
        hasFiles() {
            return this.$data.transactionsFile != null && this.$data.assignmentsFile != null;
        }
    },
    mounted() {
        this.$store.commit(TITLE, "Settings")
    },
    methods: {
        gotAssignments(e){
            this.$data.assignmentsFile = e.target.files[0];
        },
        gotTransactions(e) {
            this.$data.transactionsFile = e.target.files[0];
        },
        clearBudget() {
            // <a href="/budget/{{$store.getters.CurrentBudget.ID}}/settings/clear">Clear budget</a>
        },
        cleanNegative() {
            // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
        },
        ynabImport() {
            // <input type="hidden" name="budget_id" value="{{$store.getters.CurrentBudget.ID}}" />
            let formData = new FormData();
            formData.append("transactions", this.$data.transactionsFile);
            formData.append("assignments", this.$data.assignmentsFile);
            fetch('/api/v1/budget/'+this.$store.getters.CurrentBudget.ID+"/import/ynab", {
                method: "POST", 
                headers: {
                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
                },
                body: formData});
        }
    }
}
</script>

<template>
    <h1>Danger Zone</h1>
    <v-card>
        <v-btn @click="clearBudget">Clear budget</v-btn>
        <p>This removes transactions and assignments to start from scratch. Accounts and categories are kept. Not undoable!</p>
    </v-card>
    <v-card>
        <v-btn @click="cleanNegative">Fix all historic negative category-balances</v-btn>
        <p>This restores YNABs functionality, that would substract any overspent categories' balances from next months inflows.</p>
    </v-card>
    <v-card>
        <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>
        <button v-if="hasFiles" @click="ynabImport">Importieren</button>
    </v-card>
</template>