<script setup lang="ts">
import { ref, computed } from 'vue';
import { useTheme } from 'vuetify';
import NavigationDrawer from '@/components/NavigationDrawer.vue';
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
import { useAuthStore } from '@/stores/auth';

const $auth = useAuthStore();

const drawer = ref(false);
const theme = useTheme();
const currentTheme = computed(() => theme.global.name.value);
</script>

<template>
  <v-app
    :style="`background-color: ${currentTheme === 'light' ? '#f0f4f9' : '#1c1c1c'}`"
  >
    <v-app-bar prominent class="elevation-0 border-b px-2">
      <v-app-bar-nav-icon
        density="comfortable"
        :disabled="!$auth.loggedIn"
        @click="drawer = !drawer"
      ></v-app-bar-nav-icon>
      <v-app-bar-title>System Trace</v-app-bar-title>

      <v-spacer></v-spacer>

      <!-- Theme switcher -->
      <ThemeSwitcher class="mr-1" />
      <!-- Language switcher -->
      <LanguageSwitcher />
    </v-app-bar>

    <NavigationDrawer :drawer="drawer" @change="(e) => (drawer = e)" />

    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>
