<script lang="ts" setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useBudgetsStore } from "../stores/budget";
import { useSessionStore } from "../stores/session";
import { useSettingsStore } from "../stores/settings";

const router = useRouter();

const CurrentBudgetName = computed(() => useBudgetsStore().CurrentBudgetName);
const LoggedIn = computed(() => useSessionStore().LoggedIn);
function logout() {
  useSessionStore().logout();
  router.push("/login");
}

function toggleMenu() {
  useSettingsStore().toggleMenu();
}
function toggleMenuSize() {
  useSettingsStore().toggleMenuSize();
}

router.afterEach(function(to, from) {
  useSettingsStore().Menu.Show = false;
})
</script>

<template>
  <div class="flex bg-gray-400 dark:bg-gray-600 p-4 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 v-if="LoggedIn" class="mx-4" to="/dashboard">
        Dashboard
      </router-link>
      <router-link v-if="!LoggedIn" class="mx-4" to="/login">
        Login
      </router-link>
      <a v-if="LoggedIn" class="mx-4" @click="logout">Logout</a>
    </div>
  </div>
</template>
