<template>
  <v-app>
    <v-navigation-drawer
      app
      overflow
      temporary
      v-model="primaryDrawer.model"
      width="330"
    >
      <left-menu @close-left-menu="primaryDrawer.model = false"></left-menu>
    </v-navigation-drawer>

    <v-app-bar app tile flat height="90" color="primary" style="z-index: 999;">
      <v-icon @click.stop="primaryDrawer.model = !primaryDrawer.model"
        >icon-menu</v-icon
      >

      <router-link :to="localePath('/manager')">
        <app-logo width="180" class="ml-10" />
      </router-link>

      <v-spacer />
      <search-bar />
      <v-spacer />
      
      <div class="mr-4">
        <dark-mode-switch />
        <fullscreen />
        <listener/>
      </div>
      <div
        @click.stop="
          $store.commit('navigation/SWITCH_RIGHT_DRAWER', {
            component: 'Notifications',
          })
        "
        :style="{ cursor: 'pointer' }"
      >
        <chip-user-logged v-if="$auth.loggedIn" />
      </div>
    </v-app-bar>

    <v-main class="secondary">
        <v-overlay :value="overlay" />
      <v-container class="py-10">
        <nuxt />
      </v-container>
    </v-main>

    <v-navigation-drawer
      app
      right
      overflow
      temporary
      disable-route-watcher
      v-model="drawer"
      width="480px"
    >
      <div class="d-flex flex-column justify-space-between fill-height">
        <!-- Dynamic Component -->
        <component :is="componentDrawer" />
        <!-- <userMenu v-if="!isLearningProductPage" /> -->
        <userMenu />
      </div>
    </v-navigation-drawer>

    <footer-app />
    <global-snackbar />
  </v-app>
</template>

<script>
import AppLogo from '~/components/Logo'
import LeftMenu from '~/components/Admin/LeftMenu'
import FooterApp from '~/components/Admin/ggz/Footer/Footer'
import searchBar from '~/components/UI/SearchBar/SearchBar'
import fullscreen from '~/components/UI/FullScreen/FullScreen'
import darkModeSwitch from '~/components/UI/DarkModeSwitch/DarkModeSwitch'
import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'
import globalSnackbar from '~/components/UI/GlobalSnackbar/GlobalSnackbar'
import userMenu from '~/components/RightMenu/UserMenu'
import listener from '~/components/Listener/Listener'

export default {
  middleware: ['auth'],
  components: {
    AppLogo,
    LeftMenu,
    FooterApp,
    searchBar,
    darkModeSwitch,
    fullscreen,
    chipUserLogged,
    globalSnackbar,
    userMenu,
    listener,
    // localeSwitch,
  },
  computed: {
    drawer: {
      get() {
        return this.$store.getters.rightDrawer.display
      },
      set(v) {
        return this.$store.commit('navigation/SWITCH_RIGHT_DRAWER', v)
      },
    },
    overlay() {
      return this.$store.getters.searchOverlay
    },
    componentDrawer() {
      return this.$store.getters.rightDrawer.component
        ? () =>
            import(
              `@/components/RightMenu/${this.$store.getters.rightDrawer.component}`
            )
        : null
    },
    // isLearningProductPage() {
    //   return this.$route.name === 'manager-learning___nl'
    // },
  },
  data() {
    return {
      primaryDrawer: {
        model: null,
        type: 'default (no property)',
        clipped: false,
        floating: false,
        mini: false,
      },
    }
  },
}
</script>
