<template>
  <v-app>
    <gznotify ref="gznotify"></gznotify>
    <gzconfirm ref="gzconfirm"></gzconfirm>
    <!-- Width of nav drawer set to allow widest localized text menu item to show which is spanish client service requests item -->
    <v-navigation-drawer
      v-if="isAuthenticated"
      v-model="drawer"
      app
      width="345"
    >
      <v-list>
        <template v-for="item in navItems">
          <!-- TOP LEVEL can be holders or actions -->

          <!-- TOP LEVEL HOLDER -->
          <template v-if="!item.route">
            <v-list-group
              :prepend-icon="'fa-' + item.icon"
              :value="false"
              :key="item.key"
            >
              <template v-slot:activator>
                <!--group activator -->
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </template>
              <!-- TOP LEVEL HOLDER SUBITEMS -->

              <template v-for="subitem in item.navItems">
                <template v-if="!subitem.route">
                  <!-- SECOND LEVEL HOLDER -->
                  <div class="pl-2" :key="subitem.key">
                    <v-list-group
                      no-action
                      sub-group
                      :value="false"
                      :key="subitem.key"
                    >
                      <!-- Second level activator -->
                      <template v-slot:activator>
                        <v-list-item-content>
                          <v-list-item-title>{{
                            subitem.title
                          }}</v-list-item-title>
                        </v-list-item-content>
                      </template>

                      <v-list-item
                        v-for="subsub in subitem.navItems"
                        :key="subsub.key"
                        :to="subsub.route"
                      >
                        <v-list-item-action>
                          <v-icon v-if="subsub.icon">{{
                            "fa-" + subsub.icon
                          }}</v-icon>
                        </v-list-item-action>
                        <v-list-item-title
                          v-text="subsub.title"
                        ></v-list-item-title>
                      </v-list-item>
                      <!-- was end of v-list-group here -->
                    </v-list-group>
                  </div>
                </template>
                <template v-else>
                  <!-- SECOND LEVEL ACTION -->
                  <div class="pl-3" :key="subitem.key">
                    <v-list-item :to="subitem.route">
                      <v-list-item-action>
                        <v-icon v-if="subitem.icon">{{
                          "fa-" + subitem.icon
                        }}</v-icon>
                      </v-list-item-action>
                      <v-list-item-content>
                        <v-list-item-title>{{
                          subitem.title
                        }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </div>
                </template>
              </template>
            </v-list-group>
            <!-- END OF TOP LEVEL HOLDER -->
          </template>

          <!-- TOP LEVEL ACTION -->
          <template v-else>
            <div :key="item.key">
              <v-list-item :to="item.route">
                <v-list-item-action v-if="item.icon">
                  <v-icon>{{ "fa-" + item.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </div>
          </template>

          <!-- end of entire list -->
        </template>

        <!-- <v-list-item
          v-for="item in navItems"
          :key="item.route"
          :to="item.route"
        >
          <v-list-item-action>
            <v-icon>{{ "fa-" + item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item> -->
      </v-list>
      <!-- </v-card> -->
    </v-navigation-drawer>
    <v-app-bar
      v-if="isAuthenticated"
      :color="appBar.isMain ? 'primary' : 'secondary'"
      dark
      fixed
      app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
        <v-icon>{{ appBar.icon }}</v-icon
        >&nbsp;
        <span>{{ appBar.title }}</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <template v-for="item in appBar.menuItems">
          <v-btn
            class="hidden-xs-only"
            icon
            v-if="item.surface"
            :key="item.key"
            :disabled="item.disabled"
            @click="clickMenuItem(item)"
          >
            <v-icon :color="item.color ? item.color : ''">
              {{ "fa-" + item.icon }}
            </v-icon>
          </v-btn>
        </template>
        <v-spacer></v-spacer>
        <v-menu bottom float-left>
          <template v-slot:activator="{ on }">
            <v-btn text icon v-on="on">
              <v-icon>fa-ellipsis-v</v-icon>
            </v-btn>
          </template>
          <v-list>
            <template v-for="(item, index) in appBar.menuItems">
              <v-subheader v-if="item.header" :key="index">
                {{ item.header }}
              </v-subheader>
              <v-divider
                v-else-if="item.divider"
                :key="index"
                :inset="item.inset"
              ></v-divider>
              <v-list-item
                v-else
                :key="item.key"
                :disabled="item.disabled"
                @click="clickMenuItem(item)"
                v-bind:class="{ 'hidden-sm-and-up': item.surface }"
              >
                <v-list-item-action>
                  <v-icon
                    v-if="item.icon"
                    :color="item.color ? item.color : ''"
                    >{{ "fa-" + item.icon }}</v-icon
                  >
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    <span>{{ item.title }}</span>
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-menu>
      </v-toolbar-items>
    </v-app-bar>
    <v-content>
      <v-container fluid>
        <transition name="fade" mode="out-in" @after-leave="afterLeave">
          <router-view class="view"></router-view>
        </transition>
      </v-container>
    </v-content>
    <v-footer color="primary" padless v-if="!isAuthenticated">
      <div>
        <a
          href="https://ayanova.com"
          target="_blank"
          style="text-decoration:none"
          class="white--text caption"
        >
          <span>AyaNova ({{ version }}) {{ copyright }}</span>
        </a>
      </div>
    </v-footer>
  </v-app>
</template>

<script>
/*  Xeslint-disable    */
import ayaNovaVersion from "./api/ayanova-version";
import gzconfirm from "./components/gzconfirm";
import gznotify from "./components/gznotify";
import openObjectHandler from "./api/open-object-handler";

export default {
  components: {
    gzconfirm,
    gznotify
  },
  data() {
    return {
      drawer: null,
      appBar: {
        isMain: true,
        icon: "",
        title: "",
        helpUrl: "user-intro",
        menuItems: []
      }
    };
  },
  created() {
    //////////////////////////////////
    // WIRE UP
    // EVENT HANDLERS ON GZEVENTBUS
    //
    //
    window.$gz.menu.wireUpEventHandlers(this);
    window.$gz.dialog.wireUpEventHandlers(this);
    openObjectHandler.wireUpEventHandlers(this);
    window.$gz.locale.setVuetifyDefaultLanguageElements(this);
  },
  beforeDestroy() {
    //UNWIRE ALL EVENT HANDLERS FROM GZEVENTBUS
    window.$gz.eventBus.$off();
  },
  mounted() {
    this.$root.$gzconfirm = this.$refs.gzconfirm.open;
    this.$root.$gznotify = this.$refs.gznotify.addNotification;

    //weird bastardization thing
    //basically I want to access $gz in vue components where I can't access Window
    //this smells bad but it works
    this.$root.$gz = window.$gz;

    //redirect to login if not authenticated
    if (!this.$store.state.authenticated) {
      this.$router.push("login");
    }

    //FUTURE: If need to detect a reload, this works reliably
    //OK if here then is this a reliable way to detect a reload or refresh or re-open of the app from a closed window but still authenticated?
    //console.log("APP.VUE::Mounted=>RELOAD DETECTED?");
  },
  computed: {
    isAuthenticated() {
      return this.$store.state.authenticated === true;
    },
    navItems() {
      return this.$store.state.navItems;
    },
    copyright() {
      return ayaNovaVersion.copyright;
    },
    version() {
      return ayaNovaVersion.version;
    },
    helpUrl() {
      return this.$store.state.helpUrl;
    }
  },
  props: {
    source: String
  },
  methods: {
    afterLeave() {
      this.$root.$emit("triggerScroll");
    },
    clickMenuItem(item) {
      window.$gz.eventBus.$emit("menu-click", item);
    }
  }
};
</script>
