<template>
  <v-app :dark="setTheme">
    <v-app-bar app clipped-left id="top-navbar" tile flat :dark="setTheme">
      <v-icon @click="drawer = !drawer">icon-menu</v-icon>
      <span class="title ml-3 mr-5">31 10</span>

      <v-spacer />

      <v-btn fab text @click="switchDarkMode">
        <v-icon :color="`${darkMode && 'yellow'}`">mdi-brightness-4</v-icon>
      </v-btn>

      <fullscreen />

      <div class="mx-4">
        <v-text-field
          dense
          id="search"
          v-model="search"
          append-icon="icon-search"
          hide-details
          placeholder="Search..."
          single-line
          color="#dfdbe3"
          hint="For example, pages, items etc."
          outlined
        ></v-text-field>
      </div>

      <chip-user-logged v-if="$auth.loggedIn" />
    </v-app-bar>

    <v-navigation-drawer v-model="drawer" app clipped>
      <left-menu></left-menu>
    </v-navigation-drawer>

    <v-main class="body-content">
      <div class="pa-4">
        <nuxt />
      </div>
    </v-main>

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

<script>
import LeftMenu from '~/components/Admin/LeftMenu'
import FooterApp from '~/components/Admin/3110/Footer'
import fullscreen from '~/components/UI/FullScreen/FullScreen'
import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'
import globalSnackbar from '~/components/UI/GlobalSnackbar/GlobalSnackbar'

export default {
  middleware: 'auth',
  components: {
    LeftMenu,
    FooterApp,
    fullscreen,
    chipUserLogged,
    globalSnackbar
  },
  props: {
    source: String
  },
  data: () => ({
    drawer: null,
    search: '',
    darkMode: false
  }),
  computed: {
    setTheme() {
      return this.darkMode
        ? (this.$vuetify.theme.dark = true)
        : (this.$vuetify.theme.dark = false)
    }
  },
  mounted() {
    this.darkMode = localStorage.getItem('dark-mode') === 'true'
    this.darkMode
      ? (this.$vuetify.theme.dark = true)
      : (this.$vuetify.theme.dark = false)
  },
  methods: {
    switchDarkMode() {
      this.darkMode = !this.darkMode
      localStorage.setItem('dark-mode', this.darkMode.toString())
    }
  }
}
</script>

<style>
#top-navbar {
  border-bottom: 1px solid #dfdbe3 !important;
}
</style>