<template>
    <div id="appRoot">
      <template v-if="!$route.meta.public">

        <!-- Go to top -->

        <v-app id="inspire" class="app">
          <app-drawer class="app--drawer"></app-drawer>

          <v-content>

            <div class="page-wrapper">

              <!-- Header toolbar with Seacrh -->
              <app-toolbar class="app--toolbar"></app-toolbar>

              <router-view :key="$route.fullPath"></router-view>

            </div>
            <!-- App Footer -->

          </v-content>

          <!-- theme setting -->

          <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
            <v-icon>settings</v-icon>
          </v-btn>
          <v-navigation-drawer
            class="setting-drawer"
            temporary
            right
            v-model="rightDrawer"
            hide-overlay
            fixed
            >
            <theme-settings></theme-settings>

          </v-navigation-drawer>-->

        </v-app>
      </template>
      <template v-else>
        <transition>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </template>

      <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">

        {{ snackbar.text }}

        <v-btn dark flat @click.native="snackbar.show = false" icon>

          <v-icon>close</v-icon>
        </v-btn>

      </v-snackbar>

    </div>
  </template>
  <script>

  import AppDrawer from "@/components/pageHeader/AppDrawer";
  import AppToolbar from "@/components/pageHeader/AppToolbar";
  import menu from "@/api/menu";
  import AppEvents from "./event";

  import ThemeSettings from "@/components/ThemeSettings";

  // import { FunctionalCalendar } from "vue-functional-calendar";

  export default {
    components: {
      AppDrawer,

      AppToolbar,

      ThemeSettings
      // FunctionalCalendar

    },
    data: () => ({
      expanded: true,
      rightDrawer: false,
      snackbar: {
        show: false,

        text: "",
        color: ""

      }
    }),

    computed: {},

    created() {

      AppEvents.forEach(item => {
        this.$on(item.name, item.callback);
      });
      window.getApp = this;

    },

    methods: {
      openThemeSettings() {

        this.$vuetify.goTo(0);

        this.rightDrawer = !this.rightDrawer;

      }

    }

  };
  </script>
  
  
  <style lang="stylus" scoped>

  .setting-fab {
    top: 50% !important;
    right: 0;
    border-radius: 0;
  }

  .page-wrapper {
    min-height: calc(1200px - 64px - 50px - 81px);
  }

  </style>

  <style>

  .application {
    background-color: white !important;
    font-family: "Poppins", sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    scroll-behavior: smooth;

  }
  </style>