<template>
    <v-navigation-drawer
      id="appDrawer"
      :mini-variant.sync="mini"
      fixed
      :dark="$vuetify.dark"
      app
      v-model="drawer"
      width="260"

    >
      <v-toolbar class="fixcolors">
        <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana" />
        <v-toolbar-title class="ml-0 pl-3"></v-toolbar-title>

      </v-toolbar>
      <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
        <v-list dense expand>
          <template v-for="(item, i) in menus">

            <!--group with subitems-->
            <v-list-group
              v-if="item.items"
              :key="item.name"
              :group="item.group"
              no-action="no-action"
            >
              <v-list-tile slot="activator" ripple="ripple">
                <v-list-tile-action v-if="item.icon" class="pr-3">
                  <img :src="item.icon" width="40" alt="icons" />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <template v-for="(subItem, i) in item.items">
                <!--sub group-->
                <v-list-group
                  v-if="subItem.items"
                  :key="subItem.name"
                  :group="subItem.group"
                  sub-group="sub-group"
                >
                  <v-list-tile slot="activator" ripple="ripple">

                    <v-list-tile-content>

                      <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>

                    </v-list-tile-content>

                  </v-list-tile>

                  <v-list-tile
                    v-for="(grand, i) in subItem.children"
                    :key="i"
                    :to="genChildTarget(item, grand)"
                    :href="grand.href"
                    ripple="ripple"
                  >
                    <v-list-tile-content>
                      <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </v-list-group>
                <!--child item-->
                <v-list-tile
                  v-else
                  :key="i"
                  :to="genChildTarget(item, subItem)"
                  :href="subItem.href"
                  :disabled="subItem.disabled"
                  :target="subItem.target"
                  ripple="ripple"
                >
                  <v-list-tile-action v-if="subItem.action">
                    <img
                      width="30"
                      :src="subItem.action"
                      :class="[subItem.actionClass || 'success--text']"
                    />
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title class="body-2">
                      <span>{{ subItem.title }}</span>
                    </v-list-tile-title>
                  </v-list-tile-content>
                  <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
                </v-list-tile>
              </template>
            </v-list-group>
            <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
            <v-divider v-else-if="item.divider" :key="i"></v-divider>
            <!--top-level link-->
            <v-list-tile
              v-else
              ripple="ripple"
              :disabled="item.disabled"
              :target="item.target"
              rel="noopener"
              :key="item.path"
            >
              <a :href="item.path">

                <v-list-tile-action v-if="item.icon">

                  <img :src="item.icon" width="40" alt="icons" />

                </v-list-tile-action>

                <v-list-tile-content class="pl-3 mt-2">

                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile-content>
                <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
                <v-list-tile-action v-if="item.subAction">

                  <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
                  <img :src="item.icon" width="40" alt="icons" />

                </v-list-tile-action>
                <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->

              </a>
            </v-list-tile>

          </template>

        </v-list>
      </vue-perfect-scrollbar>

    </v-navigation-drawer>
  </template>
  <script>

  import menu from "@/api/menu";
  import VuePerfectScrollbar from "vue-perfect-scrollbar";

  export default {

    name: "app-drawer",

    components: {

      VuePerfectScrollbar

    },
    props: {
      expanded: {
        type: Boolean,
        default: true

      }

    },
    data: () => ({
      mini: false,
      drawer: true,

      menus: [],

      scrollSettings: {
        maxScrollbarLength: 160

      }

    }),
    computed: {

      computeGroupActive() {

        return true;
      },

      computeLogo() {
        return "/static/logoIntrack.png";

      },

      sideToolbarColor() {

        return this.$vuetify.options.extra.sideNav;

      }

    },

    created() {

      if (this.$store.state.role === "ADMIN") {
        this.menus = menu.adminMenu;
      } else if (this.$store.state.role === "SUPERADMIN") {
        this.menus = menu.schoolMenu;

      } else if (this.$store.state.role === "LIBRARIAN") {
        this.menus = menu.libraryMenu;
      } else if (this.$store.state.role === "ACCOUNTANT") {
        this.menus = menu.accountMenu;

      }

      window.getApp.$on("APP_DRAWER_TOGGLED", () => {
        this.drawer = !this.drawer;

      });
    },

  
    methods: {

      genChildTarget(item, subItem) {

        if (subItem.href) return;
        if (subItem.component) {
          return {

            name: subItem.component

          };
        }

        return { name: `${item.group}/${subItem.name}` };
      }

    }
  };
  </script>
  
  
  <style lang="stylus">
  // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';

  #appDrawer {
    overflow: hidden;

    .drawer-menu--scroll {
      height: calc(100vh - 48px);
      overflow: auto;
    }
  }

  .v-list__group__items--no-action .v-list__tile {

    padding-left: 72px !important;

  }

  .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {

    height: 60px;
    font-size: 17px;

  }

  .v-list__tile__action {

    min-width: 36px;

  }

  
  .v-list__tile.primary--text a {
    color: black !important;
    border-left: 4px solid black;
    border-radius: 4px;

  }

  
  @media screen and (max-width: 420px) {
    .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {

      font-size: 14px;

    }
  
    .imgLogo {
      height: 32px;
      width: 120px;
    }

  }

  </style>

  
  
  <style scoped>

  .theme--light .v-icon,
  .application .theme--light.v-icon {
    color: #39b982;

  }

  a {
    text-decoration: none;
    display: inherit;
    color: black;
  }
  a:hover {
    color: gray !important;
    /* border-left: 4px solid black; */
    /* border-radius: 4px; */
  }
  /* a:active {
    color: red !important;
  } */
  /* a:visited {
    border-left: 4px solid black;
    border-radius: 4px;
  } */
  /* visited link */
  /* a:visited {
    color: black !important;
    border-left: 4px solid black;
    border-radius: 4px;
  }
  a:active {
    color: black !important;
    border-left: 4px solid black;
    border-radius: 4px;
  }  */

  </style>