<template>
  <div>

    <p style="margin-top: 2vh"> {{titreContenu}} </p>


    <div id="actionsContenu" v-show="!isContenuRefuse">
      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance !== 'banque'" v-on:click="actionContenu('modifier')">modifier le contenu</button>
      <br v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance !== 'banque'">
      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance !== 'banque'" v-on:click="actionContenu('supprimer')">supprimer le contenu</button>
      <br v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance !== 'banque'">
      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">publier le contenu</button>
      <br v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'">
      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && (contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')" v-on:click="actionContenu('validerModification')">valider la modification</button>
      <br v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && (contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')">
      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'banque'" v-on:click="actionContenu('mettreFavori')">mettre le contenu en tiers</button>
      <br v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'banque'">

      <p  v-show="(contenuCliqueProvenance === 'banque'
      || contenuCliqueProvenance === 'perso')
       && versionMax > 1">Choisir le numéro de version que vous souhaitez consulter : </p>
      <select v-show="(contenuCliqueProvenance === 'banque'
      || contenuCliqueProvenance === 'perso')
       && versionMax > 1" v-model="versionChoisie" v-on:change="changerVersion" >
        <option v-for="i in versionMax" v-bind:key="i"> {{i}}</option>
      </select>
      <br v-show="(contenuCliqueProvenance === 'banque'
      || contenuCliqueProvenance === 'perso')
       && versionMax > 1">

      <table id="testTable" v-if="contenuCliqueProvenance!=='en-cours'">

        <tr>
          <td class="titreTableau" style="background-color: skyblue">Type du contenu</td>
          <td style="background-color: white">{{ typeContenu }}</td>
        </tr>

        <tr>
          <td class="titreTableau" style="background-color: white">Source du contenu</td>
          <td style="background-color: skyblue">{{ sourceContenu }}</td>
        </tr>

        <tr>
          <td class="titreTableau" style="background-color: skyblue">Note du contenu</td>
          <td style="background-color: white">({{versionChoisie}}) :  {{noteContenu}}</td>
        </tr>

        <tr>
          <td class="titreTableau" style="background-color: white">Popularite du contenu</td>
          <td style="background-color: skyblue">{{populariteContenu}}</td>
        </tr>

        <tr>
          <td class="titreTableau" style="background-color: skyblue">Tags associés au contenu</td>
          <td style="background-color: white">{{tagsContenus}}</td>
        </tr>

      </table>
      <br>
      <p> Voici l'intérieur de votre contenu dans sa version {{versionChoisie}} :  </p>
      <span contenteditable="false" style="background-color: white; width: 50vw; margin-left: auto; margin-right: auto" v-html="formatterMarkdown()">
      </span>
      <br>
    </div>
    <p style="text-align: center" v-show="isContenuRefuse"> Ceci est un contenu en cours ayant fait l'objet d'un refus de publication. Aucune action disponible</p>
    <button id="ren" v-on:click="revenirArriere">Retour en arrière</button>

  </div>
</template>

<script>
import Service from "../service/Service";

export default {
  name: "Consulter_Contenu",
  props: {
    // Le contenu cliqué
    contenuClique: {},
    // La provenance du contenu cliqué (perso / tiers / en-cours / banque)
    contenuCliqueProvenance: {},
    // L'auteur du contenu cliqué
    auteur: {}
  },
  methods: {
    /**
     * @vuese
     * Permet de convertir le markdown d'un contenu en du html lisible
     */
    formatterMarkdown: function () {
      let showdown  = require('showdown'),
          converter = new showdown.Converter()
      return converter.makeHtml(this.contenu)
    },
    /**
     * @vuese
     * Permet de renvoyer l'action choisie au composant Volet_Base pour traitement
     */
    actionContenu: function (action) {
      // Dès qu'une action est sélectionnée, la renvoie à Volet_Base
      // @arg action l'action choisie
      // @arg contenu le contenu cliqué
      // @arg le texte associé au contenu (sert potentiellement à rien)

      if (action === "mettreFavori"){
        this.$emit("actionContenu", {action: action, contenu: this.contenuClique, texte: this.contenu, version: this.versionChoisie})
      }else

        this.$emit("actionContenu", {action: action, contenu: this.contenuClique, texte: this.contenu})
    },
    /**
     * @vuese
     * Permet de revenir au composant Volet_Base ou au menu des Maj
     */
    revenirArriere: function () {
      if (this.contenuCliqueProvenance === 'maj'){
        // Permet de revenir au Menu des Maj
        this.$emit("retour_arriere")
      } else {
        // Permet de revenir à Volet_Base
        this.$emit("retour_arriere", {panierChoisi: this.contenuCliqueProvenance !== 'banque'})
      }
    },
    /**
     * @vuese
     * Permet de charger une version spécifique du texte d'un contenu
     */
    changerVersion: function () {
      let that = this
      Service.recupererTexteVersionContenu(JSON.stringify(this.contenuClique._id), this.versionChoisie).then(
          function (response) {
            that.contenu = response.data
            // alert(response.data)
          }
      )
    },
    /**
     * @vuese
     * Fonction qui permet de calculer la note du contenu (en fonction de la version sélectionnée)
     */
    calculerNoteDetailContenu: function() {

      if(this.versionMax !== 0){

        if (parseInt(this.versionChoisie) !== this.versionMax){
          for (let it in this.contenuClique.historique){
            if (this.contenuClique.historique[it].numero === parseInt(this.versionChoisie)){
              if (this.contenuClique.historique[it].note === 0){
                return 0
              }
              return (this.contenuClique.historique[it].note / this.contenuClique.historique[it].nbreNotes).toFixed(2)
            }
          }
          return -1
        } else {
                    if (this.contenuClique.versionEnCours.note === 0){
            return 0
          }
          return (this.contenuClique.versionEnCours.note / this.contenuClique.versionEnCours.nbreNotes).toFixed(2)
        }
  /*        return 0
        }*/
      } else {
        return 0
      }
    }
  },
  data: function () {
    return {
      contenu: '',
      versionMax: 1,
      versionChoisie: 1,
      isContenuRefuse :false,
      titreContenu: '',
      typeContenu: '',
      sourceContenu: '',
      populariteContenu: 0,
      noteContenu: 0,
      tagsContenus: []
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'un contenu est cliqué, permet d'en récupérer l'intérieur
     */
    contenuClique: function () {
      let that = this

      this.titreContenu = this.contenuClique.titre
      this.populariteContenu = this.contenuClique.popularite
      this.tagsContenus = this.contenuClique.tags_fixes === undefined ? [] : this.contenuClique.tags_fixes.join(", ")
      this.isContenuRefuse = false

      this.noteContenu = this.contenuClique.versionEnCours === undefined ? '' : this.calculerNoteDetailContenu()

      if  (Object.prototype.hasOwnProperty.call(this.contenuClique, 'refuse')){
        this.isContenuRefuse = true
      }
      if(this.contenuCliqueProvenance === 'en-cours') {
        Service.recupererTexteContenuEnCours(JSON.stringify(this.contenuClique._id)).then(
            function (response) {
              that.contenu = response.data
            }
        )

      }
      else if (this.contenuCliqueProvenance === 'maj'){
        if (Object.prototype.hasOwnProperty.call(this.contenuClique, 'idContenuEnCours')){

          Service.recupererTexteContenuEnCours(JSON.stringify(this.contenuClique.idContenuEnCours)).then(
              function (response) {
                that.contenu = response.data
                // alert(response.data)
              }
          )} else {
          Service.recupererTexteContenu(JSON.stringify(this.contenuClique._id)).then(
              function (response) {
                that.contenu = response.data
                /*                let showdown = require('showdown'),
                                    converter = new showdown.Converter()

                                that.texteDuContenuMaj = converter.makeHtml(response.data)*/
              }
          )
        }
      }
      else {
        if (this.contenuCliqueProvenance === 'perso' || this.contenuCliqueProvenance === 'banque'){
          this.versionMax = this.contenuClique.versionEnCours.numero
          this.versionChoisie = this.versionMax
        }

        Service.recupererTexteContenu(JSON.stringify(this.contenuClique._id)).then(
            function (response) {
              that.contenu = response.data
              // alert(response.data)
            }
        )
      }
    },
    /**
     * @vuese
     * Si la version sélectionnée par l'utilisateur change, on modifie la note du contenu
     */
    versionChoisie: function () {
      this.noteContenu = this.calculerNoteDetailContenu()
    }
  }
}
</script>

<style scoped>
div{
  text-align: center;
}
#actionsContenu{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#actionsContenu>button {
  width: auto;
  height: auto;
  margin-left: 45%;
  margin-right: 45%;

}

#ren {
  width: auto;
  height: auto;
}

select {
  margin-left: 45%;
  margin-right: 45%;
  text-align-last:center;
}

button {
  background-color: #7b38d8;
  border-radius: 10px;
  border: 4px double #cccccc;
  color: #eeeeee;
  width: auto;
}

#testTable {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.titreTableau{
  width: 20vw;
}




</style>