<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useTheme } from 'vuetify';
import { Visibility, routes } from './plugins/routesLayout';
import { useRoute } from 'vue-router';

const theme = useTheme();
const route = useRoute();
const showDrawer = ref(true);

function changeTheme() {
  theme.toggle();
  localStorage.setItem('theme', theme.name.value);
}

function toggleDrawer() {
  showDrawer.value = !showDrawer.value;
  localStorage.setItem('drawer', showDrawer.value ? 'Y' : 'N');
}

onMounted(() => {
  theme.change(
    localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
  );
  showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
});

function changeWebsiteTitle(path: string) {
  // Pfad als Parameter
  let currentPageInfo = routes.find((x) => x.path === path);
  if (currentPageInfo) {
    document.title = 'Judoteam - Stadtlohn | ' + currentPageInfo.name;
  } else {
    document.title = 'Judoteam - Stadtlohn';
  }
}

// Beobachte die Route auf Änderungen
watch(
  () => route.path,
  (newPath) => {
    changeWebsiteTitle(newPath);
  },
  { immediate: true },
);
</script>

<template>
  <v-app>
    <v-app-bar image="/static/images/appBarIcon.png">
      <template v-slot:image>
        <v-img
          :gradient="
            theme.name.value === 'dark'
              ? 'rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)'
              : 'rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'
          "
        />
      </template>
      <template v-slot:prepend>
        <v-app-bar-nav-icon
          v-tooltip="!showDrawer ? 'Menü öffnen' : 'Menü schließen'"
          @click="toggleDrawer()"
        ></v-app-bar-nav-icon>
      </template>

      <v-app-bar-title class="title" @click="$router.push({ name: 'Home' })"
        ><span class="pointer">Judoteam - Stadtlohn</span></v-app-bar-title
      >

      <v-tooltip v-if="!$vuetify.display.mobile">
        <template #activator="{ props }">
          <v-btn icon v-bind="props" to="/login">
            <v-icon>mdi-account</v-icon>
          </v-btn>
        </template>
        Account
      </v-tooltip>
      <v-tooltip>
        <template #activator="{ props }">
          <v-btn icon @click="changeTheme()" v-bind="props">
            <v-icon>mdi-brightness-6</v-icon>
          </v-btn>
        </template>
        {{ theme.name.value === 'dark' ? 'Hellen Modus aktivieren' : 'Dunklen Modus aktivieren' }}
      </v-tooltip>
    </v-app-bar>

    <v-navigation-drawer
      v-model="showDrawer"
      :location="$vuetify.display.mobile ? 'bottom' : undefined"
      :permanent="!$vuetify.display.mobile"
    >
      <v-list>
        <v-list-item
          v-for="item in routes.filter((x) => x.visible === Visibility.Public)"
          :key="item.path"
          :to="item.path"
          :active="route.path === item.path"
          link
          :prepend-icon="item.icon"
          :title="item.name"
          class="rounded-lg mr-1 ml-1"
        >
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <router-view></router-view>
      <v-footer
        class="d-flex align-center justify-center ga-2 flex-wrap flex-grow-1 py-3"
      >
        <v-btn
          v-for="link in routes.filter((x) => x.visible === Visibility.Footer)"
          :key="link.path"
          :to="link.path"
          :text="link.name"
          variant="text"
          rounded
        ></v-btn>
        <div class="flex-1-0-100 text-center mt-2">
          {{ new Date().getFullYear() }} — <strong>Judoteam - Stadtlohn</strong>
        </div>
      </v-footer>
    </v-main>
  </v-app>
</template>

<style scoped></style>
