<template>
  <div style="text-align: center">
    <p style="margin-top: 1vh">Bienvenue dans la page de choix des tags</p>
    <p>Pour compléter le contenu ajouté, il va falloir lui associer des tags</p>

    <label>Choisir le tag de niveau 1</label><br><br>
    <select @change="niveau1()" v-model="tagUn">
      <option>Tag1</option>
      <option>Tag2</option>
      <option>Tag3</option>
    </select><br><br>
    <label>Choisir le tag de niveau 2</label><br><br>

    <select @change="niveau2()" :disabled="niveauDeux === 0" v-model="tagDeux">
      <option v-for="i in 3" :key="i">{{tagUn}}.{{ i }}</option>
    </select><br><br>
    <label>Choisir le tag de niveau 3</label><br><br>

    <select @change="niveau3()" :disabled="niveauTrois === 0" v-model="tagTrois">
      <option v-for="i in 5" :key="i">{{tagDeux}}.{{ i }}</option>
    </select><br><br>
    <button v-on:click="validerTags" :disabled="validationTags === 0">Valider</button>
    <p>{{ tagsModifies }}</p>
  </div>
</template>

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

export default {
  name: "TagsFixes",
  data: function(){
    return {
      niveauDeux: 0,
      niveauTrois: 0,
      validationTags: 0,
      tagUn: '',
      tagDeux: '',
      tagTrois: '',
      tagsModifies: ''
    }
  },
  props: {
    // permet de déterminer quand le composant est appelé en mode "Modifier_Contenu"
    isModif: {},
    // les tags "banque" du contenu
    tagsBanque: {},
    // l'id du contenu cliqué
    id_contenu: {}
  },
  methods:{
    /**
     * @vuese
     * Entériner les tags sélectionnés pour le contenu en cours de création / d'import
     */
    validerTags: function () {

        let tagsChoisis = [this.tagUn]
        if (this.tagDeux !== "")
          tagsChoisis.push(this.tagDeux)
        if (this.tagTrois !== "")
          tagsChoisis.push(this.tagTrois)

      if (this.tagsBanque === undefined) {

        this.$emit("tags", {tags: tagsChoisis})
      }
      else {
        let data = {id_contenu: JSON.stringify(this.id_contenu), tags: tagsChoisis}
        Service.modifierTagsFixes(data)
        this.tagsModifies = "tags modifiés"
      }
    },
    /**
     * @vuese
     Quand le 1er tag est choisi, on débloque le 2e tag
     */
    niveau1: function () {

      this.validationTags = 1

      // si on est en mode "création de contenu", on débloque seulement le 2e étage de l'arborescence
      if (this.tagsBanque === undefined){
        this.niveauDeux = 1
      }
      else {
        alert("Je le suis ici")
        // si on est dans le mode modification de contenu, on efface les tags hiérarchiquement inférieurs et on bloque l'échelon 3
       // this.niveauDeux = 0
        //alert(this.niveauTrois)
        this.niveauTrois = 0
        //console.log(this.niveauTrois)
      }
    },
    /**
     * @vuese
     * Quand le 2e tag est choisi, on débloque le 3e tag
     */
    niveau2: function () {
      // dans tous les cas, on débloque le 3e échelon
      this.niveauTrois = 1
      if (this.tagsBanque !== []){
        // si on est dans le mode modification de contenu, on efface le tag du niveau 3
        this.tagTrois = ""
      }
    }
  },
  watch: {

    /**
     * @vuese
     * Permet la mise en forme des tags banque (quand le composant TagsFixes est appelé dans Modifier_Contenu)
     */
    tagsBanque: function () {
      // alert("Mais oui")
      this.tagsModifies = ""
      this.validationTags = 1
      this.niveauDeux = 1
      //alert(this.tagsBanque.length)
      this.tagUn = this.tagsBanque[0]
      if (this.tagsBanque.length > 1){
        //ert("Hihi")
        this.tagDeux = this.tagsBanque[1]
        this.niveauTrois = 1
      }
      if (this.tagsBanque.length === 3){
        //alert("Huhu")
        this.tagTrois = this.tagsBanque[2]
      }
    }
  }
}
</script>

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

</style>