<template>

    <v-toolbar flat class="white" fixed app>

      <v-toolbar-title>
        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>

      </v-toolbar-title>

      <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->

      <v-flex xs12 class="white">
        <!-- <v-text-field

          flat
          append-icon="search"
          label="Seacrh"

          class="pl-3"

          color="white"
          @input.native="emitSearch"
          type="text"
          dark

        ></v-text-field>-->

        <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>

      </v-flex>
      <v-spacer></v-spacer>

      <v-btn type="button" @click="goToSchool" v-if="adminRole && SchoolRole">Towards School!</v-btn>

      <!-- <v-toolbar-items class="hidden-sm-and-down">

        <v-icon class="header-icon">notifications_none</v-icon>

      </v-toolbar-items>-->

      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">

          <v-avatar size="26">

            <img src="/static/icon/setting1.png" alt="icon" />

          </v-avatar>

        </v-btn>

        <v-list class="pa-0">
          <v-list-tile
            v-for="(item,index) in items"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
            @click="item.click"
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="index"
          >
            <v-list-tile-action v-if="item.icon">

              <v-icon class="iconSize">{{ item.icon }}</v-icon>

            </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>
        </v-list>
      </v-menu>

    </v-toolbar>
  </template>
  <script>

  import http from "@/Services/http.js";

  export default {

    name: "app-toolbar",

    data: () => ({

      userName: "",

      search: "",

      userData: {},

      items: [
        {

          icon: "account_circle",

          href: "/resetPassword",

          title: "Change Password",

          click: (e) => {
            //   console.log(e);
          },

        },
        // {
        //   icon: 'settings',
        //   href: '#',
        //   title: 'Settings',
        //   click: (e) => {
        //     console.log(e);
        //   }
        // },
        {

          icon: "lock",

          href: "#",
          title: "Logout",

          click: (e) => {

            window.getApp.$emit("APP_LOGOUT");

          },
        },

      ],

      adminRole: "",

      SchoolRole: "",

    }),
    computed: {

      toolbarColor() {

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

      },

    },

    mounted() {

      // this.getUserData();

      this.adminRole = this.$store.state.role;

      /* push something in the settings option */
      // if (this.adminRole == "PARENT") {
      //   var obj = {};
      //   obj = {
      //     icon: "face",
      //     href: "/changeStudents",
      //     title: "Change Student",
      //     click: e => {
      //       console.log(e);
      //     }
      //   };
      //   this.items.splice(0, 0, obj);
      // }

      // console.log("this.adminRole", this.adminRole);

      this.SchoolRole = this.$store.state.schoolRole;

    },

    methods: {

      // emitSearch(ev) {
      //   this.$root.$emit("app:search", ev.target.value);
      // },

      handleDrawerToggle() {
        window.getApp.$emit("APP_DRAWER_TOGGLED");

      },

      handleFullScreen() {

        Util.toggleFullScreen();

      },
      getUserData() {
        http()

          .get("/getParticularUserDetail", {

            //  headers: {
            //   Authorization: "Bearer " + this.$store.state.token
            // }

          })

          .then((response) => {

            this.userData = response.data.data;
          })

          .catch((error) => {

            // if (error.response.status === 401) {
            //   this.$router.replace({ path: "/" });
            //   this.$store.dispatch("setToken", null);
            //   this.$store.dispatch("Id", null);
            // }

          });

      },
      goToSchool() {

        //   console.log("click");

        if (this.$store.state.role === "ADMIN") {
          this.$store.dispatch("Role", null);
          this.$store.dispatch("setToken", null);
          this.$router.push("/schooldashboard");
          setTimeout(() => {
            location.reload();
          }, 1000);
        }

      },
    },

  };
  </script>

  <style>

  .v-icon {
    font-size: 30px;

  }

  .fixcolors {

    background: #444b54 !important;

  }

  @media screen and (min-width: 1270px) {
    .hide {
      display: none;
    }
    /* }

  @media screen and (max-width: 962px) {
  .imglogo{

      position: absolute;
      top: 13px;
      left: 13px !important;
      width: 70px;
      height: 24px;

  } */

  }

  @media screen and (max-width: 420px) {
    .v-list__tile {
      font-size: 14px;
      padding: 0 10px;
    }
    .name {
      font-size: 15px;
    }

  }
  </style>