<script lang="ts">
import { defineComponent } from "vue";
import { FETCH_MONTH_BUDGET } from "../store/action-types";
import { TITLE } from "../store/mutation-types";
import Currency from "../components/Currency.vue";

interface Date {
    Year:Number, 
    Month:Number,
}

export default defineComponent({
    mounted() {
        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
    },
    watch: {
        year() {
            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
        },
        month() {
            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
        },
    },
    props: ["budgetid", "year", "month"],
    computed: {
        Categories() {
            return this.$store.getters.Categories(this.year, this.month);
        },
        previous() : Date {
            return {
                Year: new Date(this.year, this.month - 1, 1).getFullYear(),
                Month: new Date(this.year, this.month - 1, 1).getMonth(),
            };
        },
        current() : Date {
            return {
                Year: new Date().getFullYear(),
                Month: new Date().getMonth(),
            };
        },
        selected() : Date {
            return {
                Year: this.year,
                Month: Number(this.month) + 1
            }
        },
        next() : Date {
            return {
                Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
                Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
            };
        }
    },
    components: { Currency }
})

/*{{define "title"}}
    {{printf "Budget for %s %d" .Date.Month .Date.Year}}
{{end}}*/
</script>

<template>
    <h1>
        Budget for {{selected.Month}}/{{selected.Year}}
    </h1>
    <div>
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> - 
        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
    </div>
    <table class="container col-lg-12" id="content">
        <tr>
            <th>Group</th>
            <th>Category</th>
            <th></th>
            <th></th>
            <th>Leftover</th>
            <th>Assigned</th>
            <th>Activity</th>
            <th>Available</th>
        </tr>
        <tr v-for="category in Categories">
            <td>{{category.Group}}</td>
            <td>{{category.Name}}</td>
            <td></td>
            <td></td>
            <td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
            <td class="text-right"><Currency :value="category.Assigned" /></td>
            <td class="text-right"><Currency :value="category.Activity" /></td>
            <td class="text-right"><Currency :value="category.Available" /></td>
        </tr>
    </table>
</template>