<template>
  <div>
    <Login v-show="etat === 'unlogged'" @user_logged="setLogged"></Login>

    <Menu v-show="etat !== 'unlogged'" v-bind:auteur="auteur" v-bind:etat="etat" v-bind:variante="variante"
          v-bind:recalculerNotif="recalculerNotif" @menu_choisi="changerPage" @darkTheme="darkTheme"
          v-bind:nouveauTitre="nouveauTitre">
    </Menu>
    <Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute"
             @choix_variante="choixVariante" @newContenu="newContenu"
             @rechercherNouvellesPublications="rechercherPublications = !rechercherPublications" v-bind:etat="etat"
             v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion"
             @ChangerTitre="ChangerTitre" @volet_desactive="voletDesactive" @chargerTagsLibres="chargerTagsLibres"></Contenu>
    <Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
         v-bind:contenuEnPublication="contenuEnPublication" @recalculerNotif="recalculerNotification"
         @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
         v-bind:rechercherPublications="rechercherPublications" v-bind:darktheme="darktheme"></Maj>
    <Profil v-show="etat === 'Profil'"  ></Profil>
    <GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" v-bind:modeGestion="modeGestion"
                     v-bind:modeModificationContenu="modeModificationContenu" @revenirAuContenu="revenirAuContenu"></GererTagsLibres>
    <TagsFixes v-show="etat === 'newContenu_Tags'"></TagsFixes>
<!--    <p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>-->
    <NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></NewContenu>
    <ImporterFichier v-show="etat === 'importContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></ImporterFichier>
    <span id="prout" v-show="hoverManuel">Manuel d'utilisation d'OpenQuizz</span>
    <span :class="etat !== 'manuel' ? (!voletOuvert ? 'manuelVoletFerme' : 'manuel') : 'retourManuel'"  v-on:mouseover="popoverManuel" v-on:mouseleave="popoverManuel" v-on:click="consulterManuel">       </span>
    <Manuel v-show="etat === 'manuel'" v-bind:etatTmp="etatTmp"  v-bind:darktheme="darktheme"></Manuel>
  </div>
</template>

<script>
import Login from "./Login";
import Contenu from "./Contenu";
import Menu from "./Menu";
import Maj from "./Maj";
import Profil from "./Profil";
import NewContenu from "./NewContenu";
import ImporterFichier from "./ImporterFichier";
import GererTagsLibres from "./GererTagsLibres";
import TagsFixes from "./TagsFixes";
import Manuel from "./Manuel";
// import Service from "./service/Service";
// import showdown from "showdown"

export default {
  name: "Index",
  data: function () {
    return {
      etat: "unlogged",
      variante: false,
      contenuEnPublication: "",
      isNotif: false,
     // errorLogin: false,
      auteur: "",
      isRecu: false,
      isPropose: false,
      contenuAjoute: "",
      recalculerNotif: false,
      nvoContenu: '',
      rechercherPublications: false,
      majContenus: false,
     // errorMessage: 'Login ou mot de passe erroné',
      darktheme: '',
      deconnexion: false,
      nouveauTitre: '',
      couleurFond: 'aqua',
      modeGestion: false,
      hoverManuel: false,
      etatTmp: '',
      voletOuvert: true,
      modeModificationContenu: false
    }
  },
  methods: {
    /**
     * @vuese
     * Changement de l'affichage si l'authentification de l'utilsateur est validée
     */
    setLogged: function (event) {
      if (event.isLogged){
        this.etat = "Contenu"
        this.auteur = event.auteur
      }
    },
    /**
     * @vuese
     * Récupération d'un click sur le menu 'auteur' (en haut à droite)
     */
    changerPage: function (event) {
      if (event.choix === "Deconnexion"){
        this.etat = "unlogged"
        this.deconnexion = !this.deconnexion
        localStorage.clear()
      }
      else
        this.etat = event.choix
      if (event.choix === "Contenu"){
        this.deconnexion = !this.deconnexion
      }
      if (event.choix === "Tags"){
        this.modeGestion = !this.modeGestion
        this.modeModificationContenu = false
      }
      if (event.choix === "Mises à jour"){
        this.isRecu = event.isRecu
        this.isPropose = event.isPropose
      }
    },
    /**
     * @vuese
     * Récupération du booléen lié à la variante pour passage au composant Maj
     */
    choixVariante: function (event) {
      this.variante = event.variante
    },
    /**
     * @vuese
     * Permet de transmettre l'information sur le fait que le volet soit actif ou non
     */
    voletDesactive: function (event) {
      this.voletOuvert =  event.actif
    },
    /**
     * @vuese
     * Changement de l'affichage pour passer en mode de création de contenu
     */
    newContenu: function (event) {
      if (event.source === '1') {
        // alert("event.source : " + event.source)
        this.etat = "newContenu"
      } else if (event.source === '2') {
        this.etat = "importContenu"
      }

    },
    /**
     * @vuese
     * Récupération d'un contenu ajotué à destination de Volet_Base
     */
    ajouterUnContenu:function (event) {
      this.contenuAjoute = event.contenu
    },
    /**
     * @vuese
     * Changement de l'affichage pour passer en mode contenu (le mode principal de l'application)
     */
    retourArriere: function () {
      this.etat= "Contenu"
    },
    /**
     * @vuese
     * Booléen permettant de redéclencher l'affichage de l'icone de notification de maj
     */
    recalculerNotification: function () {
      this.recalculerNotif = !this.recalculerNotif
    },
    /**
     * @vuese
     * Passage d'information concernant la maj d'un contenu
     */
    majNvoContenu: function (event) {
      this.nvoContenu = event.contenu
    },
    /**
     * @vuese
     * Passage d'information concernant l'activation ou non du theme sombre:
     */
    darkTheme: function (event) {
      this.darktheme = event.active
      if (this.darktheme === true){
        document.body.style.backgroundColor = "lightslategray";
        //document.body.style.color = "white";
      } else {
        document.body.style.backgroundColor = "aqua";
        //document.body.style.color = "black";
      }
    },
    /**
     * @vuese
     * Signal de changement d'un titre (consultation d'un contenu panier, banque ou maj)
     */
    ChangerTitre: function (event) {
      this.nouveauTitre = event.titre
    },
    /**
     * @vuese
     * Permet de passer le signal pour charger le composant "GererTagsLibres"
     */
    chargerTagsLibres: function () {
      this.etat = 'Tags'
      this.modeGestion = !this.modeGestion
      this.modeModificationContenu = true
    },
    /**
     * @vuese
     * infobulle sur l'icone pour accéder au manuel
     */
    popoverManuel: function () {
      this.hoverManuel = !this.hoverManuel
    },
    /**
     * @vuese
     * permet d'accéder au manuel d'utilisation d'OpenQuizz
     */
    consulterManuel: function () {
      if (this.etat === 'manuel'){
        this.etat = this.etatTmp
        this.nouveauTitre = ""
      } else {
        this.etatTmp = this.etat
        this.etat = 'manuel'
        this.nouveauTitre = "Manuel d'utilisation de l'application OpenQuizz"
      }
    },
    /**
     * @vuese
     * Dans le cas ou le composant 'GererTagsLibres' a été appelé via l'intérieur d'un contenu, permet de revenir directement sur ce contenu
     */
    revenirAuContenu: function () {
      this.etat = 'Contenu'
      this.modeGestion = !this.modeGestion
      this.modeModificationContenu = false
    }

  },
  mounted() {
    document.body.style.backgroundColor = "aqua";
  },
  components:{
    Manuel,
    TagsFixes,
    GererTagsLibres,
    ImporterFichier,
    NewContenu,
    Login,
    Contenu,
    Menu,
    Maj,
    Profil
  }
}
</script>

<style scoped>


.manuel::before {
  content: "\01F4D6";
  position: fixed;
  bottom: 1%;
  left: 1%;
  font-size: 32px;
}

.manuelVoletFerme::before{
  content: "\01F4D6";
  position: fixed;
  bottom: 1%;
  left: 0.5%;
  font-size: 24px;
}

.retourManuel::before {
  content: "\2B05";
  position: fixed;
  bottom: 1%;
  left: 1%;
  font-size: 32px;
}

#prout {
  background-color: white;
  padding: 10px;
  position: absolute;
  bottom: 6%;
  left: 1%;
}


</style>