<template>
  <div v-bind:class="[darkMode ? 'dark' : '', etat === 'manuel' ? 'menuManuel' : 'menuHaut']">
    <DarkModeSwitch v-bind:style="[etat === 'manuel' ? {'margin-top': '10px', 'padding-top': '0px', 'padding-bottom': '5px', 'padding-left': '4px'} : {'margin-top': '10px'}, {'margin-left': '10px'}]" @switched="onSwitched"/>
    <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante && nouveauTitre !== 'Manuel d\'utilisation de l\'application OpenQuizz'"></Choix_Mode_Variante>
    <span v-show="!variante || nouveauTitre === 'Manuel d\'utilisation de l\'application OpenQuizz'" :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ titrePage }}</span>
    <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
         v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
    <div class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche"  v-bind:style="styleCircle">

    </div>
    <div :class="darkMode ? 'circleVideDark' : 'circleVide'" v-else>         </div>
    <div class="menu" v-bind:class="darkMode ? 'menuDark' : ''"   v-show="isAffiche">
      <div v-if="etat !== 'Profil'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''"  v-on:click="choixMenuAnnexe">Profil</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div v-if="etat !== 'Mises à jour'"  v-bind:class="darkMode ? 'sous_menuDark' : ''" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>

      <div v-if="etat !== 'Tags'"  class="sous_menu"   v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div v-if="etat !== 'Evaluations'"  class="sous_menu"   v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
      <div class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Deconnexion</div>
    </div>
  </div>
</template>

<script>
//[!isNotif ? {'margin-left': '94.75%'} : {'margin-left': '3%'}
import Choix_Mode_Variante from "./components/Choix_Mode_Variante";
import Service from "./service/Service";
import DarkModeSwitch from 'vue-dark-mode-switch'
import 'vue-dark-mode-switch/dist/vue-dark-mode-switch.css'

export default {
  name: "Menu",
  data: function () {
    return {
      isAffiche: false,
      isNotif: false,
      isRecu: false,
      isPropose: false,
      styleCircle: {},
      darkMode: false,
      titrePage: "",
      roblox: "https://www.google.com/url?sa=i&url=https%3A%2F%2Feducation.roblox.com%2F&psig=AOvVaw2WUZcaXl4Wpn3dLXhgO41R&ust=1626436473301000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCIjmoJWC5fECFQAAAAAdAAAAABAD"
    }
  },
  computed: {
    menuHaut: function () {
      return "menuProut"
    }
  },
  props: {
    // Permet de déterminer si on est dans le mode mise à jour ou pas
    etat: {},
    // Booléen pour savoir si la variante du menu Banque/Panier est active ou pas
    variante: {},
    // Auteur connecté
    auteur: {},
    // Booléen permettant le recalcul des notifications
    recalculerNotif: {},
    // Variable permettant d'afficher un titre particulier en haut de la page
    nouveauTitre: {}
  },
  methods: {
    /**
     * @vuese
     * Gestion du clic sur un des éléments du menu 'auteur' (en haut à droite)
     */
    choixMenuAnnexe: function (e) {
      const menuClique = e.target.innerText
      if (menuClique !== "Contenu"){
        this.titrePage = menuClique
      }
      else {
        this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
      }
      this.$emit("menu_choisi", {choix: menuClique})
      this.isAffiche = false
    },
    /**
     * @vuese
     * Gestion du clic sur le menu des évaluations. Sera, a terme, intégré dans choisMenuAnnexe.
     */
    evaluations: function () {
      alert("Gestion des évaluations (a venir)")
    },
    /**
     * @vuese
     * Gestion du clic sur l'icone de notification
     */
    choixIconeNotification: function () {
      this.$emit("menu_choisi", {choix: "Mises à jour", isRecu: this.isRecu, isPropose: this.isPropose})
      this.isAffiche = false
    },
    /**
     * @vuese
     * Fonction de calcul de présence de notification dans le cadre des mises à jour recues (de contenu perso ou de contenu tiers)
     */
    publicationsRecues: function () {
      let that = this

      console.log("Salut salut, je le suis dans publications recues")

      Service.getPublicationsRecues(this.auteur).then(function (response) {
        let contenusRecu = response.data

        for (let i = 0; i < contenusRecu.length; i++) {

          if (contenusRecu[i].etat === "enCours") {
            that.isNotif = contenusRecu.length !== 0
            that.isRecu = that.isNotif
            break
          }
        }
        that.majTiers()
        that.changerStyle()
      })
    },
    /**
     * @vuese
     * Fonction de calcul de présence de notification dans le cadre des mises à jour proposées (dont l'état n'est plus en cours)
     */
    publicationsProposees: function () {
      let that = this

      console.log("Salut salut, je le suis dans publications proposees")

      Service.getPublicationsProposees(this.auteur).then(function (response) {
        let contenusPropose = response.data


        for (let i = 0; i < contenusPropose.length; i++) {

          if (contenusPropose[i].etat !== "enCours") {
            that.isNotif = true
            that.isPropose = that.isNotif
            break
          }
        }
        that.changerStyle()

      })
    },
    /**
     * @vuese
     * (A construire) Fonction de calcul du nombre de maj tiers disponibles
     */
    majTiers: function () {
      let that = this
      Service.isMajTiersDisponible(this.auteur).then(function (response) {

        if (response.data === "True") {
          that.isNotif = true
          that.isRecu = that.isNotif
        }
        that.changerStyle()

      })
    },
    /**
     * @vuese
     * Fonction qui petmet d'affecter les bonnes marges pour le menu d'en haut à droite
     */
    changerStyle: function () {


      if (this.isNotif){
        this.styleCircle["margin-left"] = "3%"
      }
      else if (this.variante){
        this.styleCircle["margin-left"] = "38.87%"
      }
      else {
        this.styleCircle["margin-left"] = "94.75%"

      }
    },
    onSwitched: function (isSwitched) {
      this.darkMode = isSwitched
      this.$emit("darkTheme", {active: isSwitched})
    }
  },
  components: {
    Choix_Mode_Variante,
    DarkModeSwitch
  },
  watch: {
    /**
     * @vuese
     * Dès que l'auteur est trasmis à cette page, on calcule ses opportunités de maj et on configure la notification en fonction
     */
    auteur: function () {
      this.isNotif = false
      this.publicationsRecues()
      this.publicationsProposees()

      this.changerStyle()
      this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
    },
    /**
     * @vuese
     * Recalcul des opportunités de maj et on configure la notification en fonction après action dans le menu maj (fonctionne actuellement pas)
     */
    recalculerNotif: function () {
      this.isNotif = false
      this.publicationsRecues()
      this.changerStyle()
    },
    /**
     * @vuese
     * permet de récupérer l'activation / désactivation de la variante
     */
    variante: function () {
      this.changerStyle()
    },
    /**
     * @vuese
     * Si besoin, change le titre de la page
     */
    nouveauTitre: function () {
      if (this.nouveauTitre === ""){
        this.titrePage = "OpenQuizz - Bienvenue " + this.auteur

      } else {
        this.titrePage = this.nouveauTitre
      }
    },
    /**
     * @vuese
     * Si on clique sur manuel on desactive le 'menu annexe'
     */
    etat: function () {
      if (this.etat === 'manuel'){
        this.isAffiche = false
      }
    }
  }
}
</script>

<style scoped>

.menuHaut{
  display: flex;
  background-color: white;
  justify-content: center;
}

.menuManuel{
  display: flex;
  background-color: white;
  justify-content: space-between;
}

.circle {
  border: 1px solid yellow;
  margin-top: 0.25%;
  margin-bottom: 0.25%;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center;
  justify-content: center;
  height: 4.2vh;
  width: 4.2vh;

  background: gold url(assets/img/person2.png);
  background-size: cover;

}

.circleVide {
  border: 1px solid white;
  margin-top: 0.25%;
  margin-bottom: 0.25%;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center;
  justify-content: center;
  height: 4.2vh;
  width: 4.2vh;
  margin-right: 0.25%;
}

.circleVideDark {
  border: 1px solid black;
  margin-top: 0.25%;
  margin-bottom: 0.25%;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center;
  justify-content: center;
  height: 4.2vh;
  width: 4.2vh;
  margin-right: 0.25%;

}

.menuVariante{
  margin-top: 1%;
  z-index: 1;

}

.menu{
  height: 200px;
  width: 100px;
  background: white;
  border: thin solid black;
  margin-top: 46px;
  margin-left: 94.75%;
  position: fixed;
  display: flex;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;

  z-index: 5;
}

.notif {
  border: thin solid black;
  border-radius: 30%;
  height: 30px;
  width: 30px;
  z-index: 1;
  margin-left: 90%;
  background-image: url(assets/img/cloche.png);
  background-size: cover;
  margin-top: 0.5%;
  margin-bottom: 0.5%;

}

.sous_menu{
  flex-basis: 20%;
  border: thin solid black;
  line-height: 36px;
  z-index: 1;

}

.prout {

  display: flex;
  position: absolute;
  margin-top: 0.5%;
  margin-bottom: 0.1%;
}

.proutManuel {

  margin-top: 0.5%;
  margin-bottom: 0.1%;
}

.dark, .menuDark, .sous_menuDark {
  background-color: #111 !important;
  color: #eee;
  border-color: white !important;
}
</style>