<script setup lang="ts">
import { onMounted, ref } 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;
});
</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 @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">
            <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-main>
  </v-app>
</template>

<style scoped></style>
