<script lang="ts" setup>
import { computed, defineProps, onMounted, PropType, watch, watchEffect } from "vue";
import Currency from "../components/Currency.vue";
import { useBudgetsStore } from "../stores/budget";
import { useAccountStore } from "../stores/budget-account";

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

const props = defineProps<{
    budgetid: string,
    year: string,
    month: string,
}>()

const budgetsStore = useBudgetsStore();
const CurrentBudgetID = computed(() => budgetsStore.CurrentBudgetID);

const categoriesForMonth = useAccountStore().CategoriesForMonth;
const Categories = computed(() => {
    return [...categoriesForMonth(selected.value.Year, selected.value.Month)];
});
const previous = computed(() => ({
        Year: new Date(selected.value.Year, selected.value.Month - 1, 1).getFullYear(),
        Month: new Date(selected.value.Year, selected.value.Month - 1, 1).getMonth(),
}));
const current = computed(() => ({
        Year: new Date().getFullYear(),
        Month: new Date().getMonth(),
}));
const selected = computed(() => ({
        Year: Number(props.year) ?? current.value.Year,
        Month: Number(props.month ?? current.value.Month)
}));
const next = computed(() => ({
        Year: new Date(selected.value.Year, Number(props.month) + 1, 1).getFullYear(),
        Month: new Date(selected.value.Year, Number(props.month) + 1, 1).getMonth(),
}));

watchEffect(() => {
    if (props.year != undefined && props.month != undefined)
        return useAccountStore().FetchMonthBudget(props.budgetid ?? "", Number(props.year), Number(props.month));
});

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

<template>
    <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
    <div>
        <router-link
            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
        >Previous Month</router-link>-
        <router-link
            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
        >Current Month</router-link>-
        <router-link
            :to="'/budget/' + CurrentBudgetID + '/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>