<script lang="ts">
import { mapState } from "pinia";
import { defineComponent } from "vue";
import { useBudgetsStore } from "./stores/budget";
import { useSessionStore } from "./stores/session";
import { useSettingsStore } from "./stores/settings";

export default defineComponent({
    computed: {
        ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
        ...mapState(useSessionStore, ["LoggedIn"]),
    },
    methods: {
        logout() {
            useSessionStore().logout();
            this.$router.push("/login");
        },
        toggleMenu() {
            useSettingsStore().toggleMenu();
        },
        toggleMenuSize() {
            useSettingsStore().toggleMenuSize();
        }
    },
})
</script>

<template>
    <div class="flex flex-col md:flex-row flex-1 h-screen">
        <router-view name="sidebar"></router-view>

        <div class="flex-1 overflow-auto">
            <div
                class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
                <span
                    class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
                    @click="toggleMenuSize"
                    >≡</span
                >
                <span
                    class="flex-1 font-bold text-5xl -my-3 md:hidden"
                    @click="toggleMenu"
                    >≡</span
                >

                <span class="flex-1">{{ CurrentBudgetName }}</span>

                <div class="flex flex-1 flex-row justify-end -mx-4">
                    <router-link class="mx-4" v-if="LoggedIn" to="/dashboard"
                        >Dashboard</router-link
                    >
                    <router-link class="mx-4" v-if="!LoggedIn" to="/login"
                        >Login</router-link
                    >
                    <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
                </div>
            </div>

            <div class="p-3 pl-6">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
