<template>
  <div>
    <div id="titreContenu" v-bind:style="darktheme ? 'color:white' : ''">
      <!--      <select v-show="(contenuCliqueProvenance === 'banque'
            || contenuCliqueProvenance === 'perso')

             && versionMax > 1" v-model="versionChoisie" v-on:change="changerVersion" >-->
      <div id="typeEtSource">
        Type : {{typeContenu}}<br>

        Source : {{sourceContenu}}
      </div>
      <div id="notePopularite">
        Note version : {{noteContenu}}<br>
        Popularité : {{populariteContenu}}<br>
      </div>
      <span id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</span>


      <div id="modifTitre">
        <div id="changerTitre">
          <label v-if="sourceContenu !== 'moodle'">Titre du contenu : </label>
          <label v-else>Nom de la question : </label>
          <br>
          <select v-show="contenuCliqueProvenance === 'perso' && versionMax > 1" v-model="versionChoisie" v-on:change="changerVersion"
                  style="margin-right: 5px; background: none; border: none" >
            <option v-for="i in versionMax" v-bind:key="i"> v{{i}}</option>
          </select>
          <input type="text" id="titreDuContenu" placeholder="titre du contenu" style="width: 350px; outline: none; border: none"  v-model="titreContenu">
        </div>
        <div id="voirNote">
          <button style="margin-left: 10px; background: floralwhite; border: none" v-show="contenuCliqueProvenance === 'tiers' && !notePresente" id="noterContenu">{{ messageNoter }}</button>
          <b-popover target="noterContenu" triggers="click" placement="bottom">
            <star-rating @rating-selected ="setRating" v-model="rating" :read-only="notePresente" :show-rating="false" :increment=0.5 :star-size=25 />
          </b-popover>

          <star-rating v-show="notePresente" @rating-selected ="setRating" v-model="rating" :read-only="notePresente"
                       :show-rating="false" :increment=0.5 :star-size=25 />
        </div>
      </div>

      <div id="actionsContenu">
        <!--        <button class="boutonAction" v-on:click="actionContenu('supprimer')">Supprimer</button>-->
        <span class="boutonAction" v-if="contenuCliqueProvenance !== 'perso' && contenuCliqueProvenance !== 'tiers'" v-on:click="actionContenu('supprimer')" id="supprimerContenu"></span>
        <span class="boutonAction" v-else v-on:click="actionContenu('supprimer')" id="supprimerContenuSolo"></span>
        <!--        <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
              contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>-->
        <span  class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
      contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')" id="publierContenu">publier contenu</span>
        <!--        <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
              (contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
                        v-on:click="actionContenu('validerModification')">Valider la modification</button>-->
        <span class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
      (contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
              v-on:click="actionContenu('validerModification')" id="validerContenu">valider contenu</span>
        <span class="boutonAction" v-show="sourceContenu === 'moodle'" v-on:click="actionContenu('exporter')"
              id="exporterContenu">Exporter</span>
      </div>
    </div>
    <br>
    <div class="mavonEditor" v-show="!isModeTag && sourceContenu !== 'moodle'">

      <mavon-editor  :language="'fr'" style="position: static; height: 78vh; margin-top: -0.77%" v-model="texteDuContenu"/>
    </div>
    <TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" @actionTagLibre="actionTagLibre"
                style="position: static; height: 78vh; margin-top: -0.77%" v-bind:darktheme="darktheme" @chargerTagsLibres="chargerTagsLibres" v-bind:tagLibreAssocie="tagLibreAssocie"></TagsLibres>

    <Edit_Contenus @actionMoodle="actionMoodle" v-show="!isModeTag && sourceContenu === 'moodle'" v-bind:darktheme="darktheme"
                   v-bind:idContenu="idContenu" v-bind:provenance="contenuCliqueProvenance"></Edit_Contenus>

    <div class="markdown" v-show="sourceContenu !== 'moodle'">
      <br>
      <button id="validerModif" v-on:click="action('valider')">modifier </button>
      <button id="retourArriere" v-on:click="action('arriere')"> revenir en arrière</button>

    </div>
    <star-rating v-show="false"/>
  </div>
</template>

<script>

import Service from "../service/Service";
import StarRating from 'vue-star-rating'
import TagsLibres from "../TagsLibres";
import Edit_Contenus from "./moodle/Edit_Contenus";


export default {
  name: "Modifier_Contenu",
  components: {
    Edit_Contenus,
    TagsLibres,
    StarRating
  },
  props: {
    // le texte du contenu cliqué
    texteDuContenu: {},
    // l'auteur qui effectue la modification (l'auteur du contenu en cours)
    auteur: {},
    // la provenance (perso, tiers, en-cours)
    contenuCliqueProvenance: {},
    // la version du contenu cliqué
    contenuCliqueVersion: {},
    // le contenu clique
    contenuClique: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // Récupération d'un tag libre ajouté
    tagLibreAssocie: {}
  },
  data: function () {
    return {
      contenu: '',
      versionChoisie: 0,
      titreContenu: '',
      isContenuRefuse: false,
      versionMax: 0,
      rating: 0,
      notePresente: false,
      messageNoter: "noter",
      populariteContenu: 0,
      noteContenu: 0,
      isModeTag: false,
      titreModifierTags: "modifier Tags",
      typeContenu: '',
      sourceContenu: '',
      idContenu: ''
    }
  },
  methods: {
    /**
     * @vuese
     * Gestion de l'action choisie par l'utilisateur : soit valider une modification de l'intérieur du contenu, soit revenir en arrière
     */
    action: function (actionChoisie) {
      this.isModeTag = false
      this.questionParsee = ''
      if (actionChoisie === 'valider'){

        if (this.sourceContenu === 'moodle'){
          alert("Je modifie un moodle")
        } else {
          // evenement de modification du texte d'un contenu
          // @arg l'action choisie, ici 'valider'
          // @arg le texte modifié
          this.$emit("choixModif", {action: actionChoisie, nouveauTexte: this.texteDuContenu, titre: this.titreContenu})
        }
      } else {
        // evenement de retour en arrière vers Consulter_COntenu
        // @arg l'action choisie, ici 'arriere'
        this.$emit("choixModif", {action: actionChoisie})
      }
    },
    /**
     * @vuese
     * Si on change de version on recharge le texte du contenu
     */
    changerVersion: function () {
      let that = this
      if (this.contenuCliqueProvenance === 'perso' && this.versionMax > 1){
      Service.recupererTexteVersionContenu(JSON.stringify(this.contenuClique._id), this.versionChoisie).then(
          function (response) {
            that.texteDuContenu = response.data
          }
      )}
    },
    /**
     * @vuese
     * Dès qu'une action est sélectionnée, la renvoie à Volet_Base
     */
    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)

      this.$emit("actionContenu", {action: action, contenu: this.contenuClique, texte: this.texteDuContenu})
    },
    /**
     * @vuese
     * Fonction de récupération de la note mise par l'utilisateur
     */
    setRating: function () {
      let that = this
      let data = {
        id_contenu: JSON.stringify(this.contenuClique._id),
        note: this.rating,
        auteur: this.auteur,
        version: this.contenuClique.version
      }
      Service.noterContenu(data).then(function (response) {
        document.getElementById('noterContenu').click()
        that.notePresente = true
        that.messageNoter = "Voir votre note"
        let notes = JSON.parse(response.data)

        that.$emit("majMoyenne", {
          id: that.contenuClique._id,
          note: notes[0],
          nbreNotes: notes[1],
          notePerso: that.rating
        })
      })
    },
    /**
     * Déclencheur du mode "edition de tag"
     */
    modifierTags: function () {
      this.isModeTag = !this.isModeTag
      if (this.isModeTag){
        this.titreModifierTags = "modifier contenu"
      } else {
        this.titreModifierTags = "modifier tags"
      }
    },
    /**
     * @vuese
     * ajout ou suppression d'un tag à destination de Volet_Base
     */
    actionTagLibre: function (event) {
      // on est dans le cadre de la suppression d'un tag
      if(event.creation === undefined){
        this.$emit("actionTagLibre", {suppression: event.suppression, id_contenu: event.id_contenu})
      }
      // on est dans le cadre de l'ajout d'un tag
      else {
        this.$emit("actionTagLibre", {creation: event.creation, id_contenu: event.id_contenu})
      }
    },
    /**
     * @vuese
     * Permet de passer le signal pour charger le composant "GererTagsLibres"
     */
    chargerTagsLibres: function () {
      this.$emit("chargerTagsLibres")
    },
    actionMoodle: function (event) {
      if (event.action === 'arriere')
        this.$emit("choixModif", {action: event.action})
      else
        this.$emit("choixModif", {action: event.action, questionParsee: event.questionParsee, titre: this.titreContenu})
    }


  },
  computed: {
    /**
     * @vuese
     * Fonction de calcul de la note globale d'un contenu (en fonction de sa version)
     */
    calculerNoteContenu: function() {

      if (this.contenuCliqueProvenance !== "moodle" && this.contenuCliqueProvenance !== "") {
        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
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'un contenu est chargé on l'analyse pour "habiller" la page
     */
    contenuClique: function () {


      if (this.contenuClique !== []) {
        this.titreContenu = this.contenuClique.titre
        this.noteContenu = this.contenuCliqueProvenance !== 'en-cours' ? this.calculerNoteContenu : this.contenuClique.moyenne
        this.typeContenu = this.contenuClique.type
        this.sourceContenu = this.contenuClique.source
        this.populariteContenu = this.contenuClique.popularite
        this.idContenu = this.contenuClique._id
        this.isContenuRefuse = Object.prototype.hasOwnProperty.call(this.contenuClique, 'refuse')

        if (this.contenuCliqueProvenance === 'perso') {
          this.versionMax = this.contenuClique.versionEnCours.numero
          this.versionChoisie = this.versionMax
        } else {
          this.versionChoisie = this.contenuClique.version
        }

        let that = this

        if (this.contenuCliqueProvenance !== 'banque'){
          Service.recupererNoteContenu(JSON.stringify(this.contenuClique._id), this.auteur, this.versionChoisie).then(function (result) {
            let nombre = result.data
            if (nombre !== '-') {
              nombre = JSON.parse(nombre)
              that.rating = nombre.note
              that.notePresente = true
            }
          })
        }
      }
    },
    /**
     * @vuese
     * Si on change de version on recalcule la note
     */
    versionChoisie: function () {
      this.noteContenu = this.calculerNoteContenu
    },

  }
}

</script>

<style scoped>
div {
  text-align: center;
}
button {
  height: auto;
  width: auto;
}

#tagsLibres {
  margin: 20px 10px;
  flex-basis: 9%;

}

#validerModif {
  margin-right: 5px;
  margin-bottom: 10px;
}

#titreContenu {
  margin-left: 5px;
  text-align: center;
  align-content: center;
  display: flex;
  /*margin: 0 auto -15px;*/
}

#typeEtSource, #notePopularite {
  margin-top: 10px;
  flex-basis: 9%;
  margin-bottom: 10px;

}



#actionsContenu {
  margin-top: 20px;
  flex-basis: 25%;
}

#modifTitre {
  margin-top: 5px;
  flex-basis: 43%;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}

#noterContenu {
  margin-left: 5px;
}

#changerTitre {
  align-items: center;
  position: absolute;
}

#voirNote {
  margin-left: 400px;
  margin-top: 24px;
  align-items: inherit;
  position: relative
}

.boutonAction {
  margin-right: 2px;
}

#supprimerContenuSolo::before {
  content: "\01F5D1";
  font-size: 20px;

  /*  border-right: 1px solid black;
    margin-right: 10px;
    padding-right: 10px;*/
}

#supprimerContenuSoloDark::before {
  content: "\01F5D1";
  color: transparent;
  text-shadow: 0 0 0 white;
  font-size: 20px;

}

#supprimerContenu::before {
  content: "\01F5D1";
  border-right: 1px solid black;
  margin-right: 10px;
  padding-right: 10px;
  font-size: 20px;

}

#supprimerContenuDark::before {
  content: "\01F5D1";
  color: transparent;
  text-shadow: 0 0 0 white;
  border-right: 1px solid black;
  margin-right: 10px;
  padding-right: 10px;
  font-size: 20px;

}


#validerContenu::before {
  content: "\2712";
  margin-right: 5px;
}

#publierContenuDark::before {
  content: "\01F4F0";
  margin-right: 5px;
  color: transparent;
  text-shadow: 0 0 0 white;
}

#validerContenuDark::before {
  content: "\2712";
  margin-right: 5px;
  color: transparent;
  text-shadow: 0 0 0 white;
}

#publierContenu::before {
  content: "\01F4F0";
  margin-right: 5px;
}


#tagsLibres::before {
  content: "\270F ";
  transform: rotate(180deg);
  padding-right: 5px;
  margin-right: 5px;
  /*  left: 350px;
    position: absolute;*/
}

#exporterContenu::before {
  content: "\01F4F0";
  margin-right: 5px;
  border-left: 1px solid black;
  padding-left: 10px;
  margin-left: 10px;

}

</style>