<template>
  <div v-if="is_connected">
    <v-navigation-drawer v-model="nav" absolute>
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-icon>{{ access_text.icon }}</v-icon>
        </v-list-item-avatar>

        <v-list-item-title>{{ fullname }}</v-list-item-title>

        <v-btn icon @click.stop="nav = false">
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>
      <font color="white">
        <v-list-item-subtitle>
          Vous êtes un
          <font :color="access_text.color">{{ access_text.text }}</font>
        </v-list-item-subtitle>
      </font>
      <hr />
      <v-list dense>
        <v-list-item
          v-for="item in nav_items"
          :key="item.title"
          @click="goto(item.link)"
          v-show="(!item.admin && account_level >= 0) || (item.admin && account_level >= item.admin)"
          :disabled="item.disabled"
        >
          <v-list-item-icon>
            <v-icon :color="item.color">{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar>
      <v-app-bar-nav-icon @click="nav=true"></v-app-bar-nav-icon>&nbsp;
      <v-icon>mdi-printer-3d</v-icon>&nbsp;&nbsp;MyFab2 Pre-α
      <v-spacer></v-spacer>
      <v-alert v-if="show_error_overlay" type="error">
        Problem Detected, attempting reconnection... <code>{{ error_message }}</code>
      </v-alert>
      <v-spacer></v-spacer>
      <v-img max-height="50px" max-width="60px" src="static/DVIC.png" />&nbsp;&nbsp;&nbsp;&nbsp;
      <v-img max-height="50px" max-width="45px" src="static/dvfl.png" />
    </v-toolbar>
    <div>
      <router-view />
    </div>
  </div>
  <div v-else>
    <div v-if="not_connected">
      <v-container justify="center" align="center">
        <v-alert type="error">
          <h3>MyFab n'est pas disponible</h3>Le serveur MyFab semble avoir un problème. Si cette erreur persiste merci d'en informer l'équipe Fablab ou le DVIC.
        </v-alert>
        <div align="center">
          <v-img
            align="center"
            justify="center"
            max-height="300px"
            max-width="300px"
            src="/myfab/static/DVIC_cry.png"
          />
        </div>
      </v-container>
    </div>
    <v-container v-else justify="center" align="center">
      <v-alert type="error">
        <h3>Vous n'êtes pas connecté</h3>Pour utiliser cette application, merci de vous connecter sur le site du DVIC.
        <br />Vous pouvez
        <a href="https://dvic.devinci.fr/api/login">cliquer ici</a> pour être redirigé.
      </v-alert>
    </v-container>
  </div>
</template>

<script>
import ImpressionRequest from "./ImpressionRequestCard";
export default {
  components: {
    ImpressionRequest
  },
  computed: {
    show_error_overlay() {
      return this.$store.state.global_error.show;
    },
    error_message() {
      return this.$store.state.global_error.msg;
    },
    fullname() {
      return this.$store.state.user_info.fullname;
    },
    is_admin() {
      return this.$store.state.admin;
    },
    is_connected() {
      return this.$store.state.connected;
    },
    access_text() {
      return this.$store.state.user_info.account_type;
    },
    account_level() {
      return this.$store.state.user_info.access;
    },
    not_connected() {
      return this.$store.state.not_connected;
    }
  },
  methods: {
    close_error() {
      this.$store.commit("close_error_message");
    },
    goto(where) {
      this.$router.push(where);
      this.nav = false;
    }
  },
  data() {
    return {
      nav: false,
      nav_items: [
        {
          icon: "mdi-folder-plus",
          title: "Nouvelle demande",
          color: "green",
          link: "new",
          admin: 0
        },
        {
          icon: "mdi-folder",
          title: "Mes demandes",
          color: "",
          link: "my",
          admin: 0
        },
        {
          icon: "mdi-account",
          title: "Gestion des utilisateurs",
          color: "blue",
          link: "users",
          admin: 2
        },
        {
          icon: "mdi-folder-cog",
          title: "Gestion des demandes",
          color: "blue",
          link: "manage",
          admin: 1
        },
        {
          icon: "mdi-printer-3d",
          title: "Gestion des imprimantes",
          color: "blue",
          link: "printers",
          admin: 2
        },
        {
          icon: "mdi-tray-full",
          title: "Gestion des files",
          color: "blue",
          link: "queues",
          admin: 2
        }
      ]
    };
  }
};
</script>

<style scoped>
li a {
  text-decoration: none;
}
</style>
