<template>
    <v-container>


      <v-app-bar prominent app :elevation="2" style="background-color: white">
        <!--<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>-->
        <v-spacer></v-spacer>
        <v-img class="mx-2 logoPng" src="images/HA-South_Africa.svg" max-height="200" max-width="200" href="#" contain align-center center></v-img>
        <v-spacer />
      </v-app-bar>
      <v-form id="form" ref="form" method="post" action="/logout">
        <input type="hidden" name="_token" :value=" this.$root.csrfToken" />
    </v-form>

          <!--<v-navigation-drawer v-model="drawer" bottom temporary app  style="background-color: #f7efe5">-->
      <v-navigation-drawer expand-on-hover rail app  style="background-color: white" elevation="24" rail-width="60">
        <v-list :lines="false" density="compact" nav>
          <v-list-item prepend-icon="mdi-view-dashboard" title="Home" color="primary" href="/" link>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list :lines="false" density="compact" nav class="pt-5">
          <v-list-item v-for="(item, i) in items" :key="i" :value="item" color="primary" :href="item.link" link :class="{ 'v-list-item--active': item.active }">
            <template v-slot:prepend>
              <v-badge :content="item.badge" floating color="red" v-if="item.badge > 0">
                <v-icon :icon="item.icon"></v-icon>
              </v-badge>
              <v-icon :icon="item.icon" v-if="item.badge === 0"></v-icon>
            </template>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list :lines="false" density="compact" nav>
          <v-list-item color="primary" @click="logout">
            <template v-slot:prepend>
              <v-icon icon="mdi-backspace-outline"></v-icon>
            </template>
            <v-list-item-title>Logout</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

    </v-container>
</template>




<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    email: {
      type: String,
      required: true
    },
    role: {
      type: String,
      required: true
    }
  },

  data: () => ({
      drawer: false,
      items: [],
      accessManagerBadge: 0,
  }),

  mounted() {
    this.createNavigation();
  },

  methods: {
    logout() {
      form.submit();
    },

    createNavigation() {
      let accessManagerActive = false;
      let roleManagerActive = false;
      let adminManagerActive = false;
      let usersManagerActive = false;
      if (location.href.includes('admin-manager')) {
        adminManagerActive = true;
      }
      if (location.href.includes('users-manager')) {
        usersManagerActive = true;
      }
      if (location.href.includes('role-manager')) {
        roleManagerActive = true;
      }
      if (location.href.includes('access-manager')) {
        accessManagerActive = true;
      }

      if(this.role == 1 || this.role == 2) {
        this.$root.axiosGet('/access-manager/unfinished').then(data => {
          this.accessManagerBadge = parseInt(data.response.data.data);
          console.log(this.accessManagerBadge)

          if(this.role == 1) {
          this.items = [
            {text: "Access Manager", icon: "mdi-security", link: "/access-manager", active: accessManagerActive, badge:this.accessManagerBadge},
            {text: "Employees Manager", icon: "mdi-account-multiple-outline", link: "/users-manager", active: usersManagerActive, badge:0 },
            {text: "Roles Manager", icon: "mdi-folder-account", link: "/role-manager", active: roleManagerActive, badge:0 },
            {text: "Administrators Manager", icon: "mdi-shield-account", link: "/admin-manager", active: adminManagerActive, badge:0 },
          ];
        }
        if(this.role == 2) {
          this.items = [
            {text: "Access Manager", icon: "mdi-security", link: "/access-manager", active: accessManagerActive, badge:this.accessManagerBadge },
            {text: "Employees Manager", icon: "mdi-account-multiple-outline", link: "/users-manager", active: usersManagerActive, badge:0 },
            {text: "Roles Manager", icon: "mdi-office-building-outline", link: "/role-manager", active: roleManagerActive, badge:0 },
          ];
        }
        }); 
      }
        
        if(this.role == 3) {
          this.items = [
            {text: "Employees Manager", icon: "mdi-account-multiple-outline", link: "/users-manager", active: usersManagerActive, badge:0 }
          ];
        }
        if(this.role == 4) {
          this.items = [
            //{text: "Home", icon: "mdi-home-outline", link: "/" },
          ];
        }
      }
  },
}

</script>
