<template>
  <div v-bind:class="editMode ? 'modeConsultation' : 'modeModification'">
    <!-- arborescence globale -->
    <ul :class="editMode ? 'editArborescenceLibre' : 'arborescenceLibre'" class="menuNonFinal" >
      <!-- creation de nouveau filtre de 'niveau' 1 -->
      <li  v-if="editMode">
        <span v-bind:class="darktheme ? 'nouveauTagLibreDark' : 'nouveauTagLibre'"
              @click="ajouterTagLibre">nouveau tag libre</span></li>
      <!-- zone de création de filtre de niveau 1 -->
      <li v-show="nouveauTagLibre"><span class="niveauInamovible"></span>
        <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre" v-on:keyup="keymonitor">
        <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibre"></span>
        <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
      <!-- selection de contenus sans filtre libre établi -->
      <li v-on:click="nouveauFiltre($event, 'sans Tag Libre')" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
      <!-- affichage des filtres personnels de l'utilisateur -->
      <ul v-for="filtre in filtresNiveauUn" :key="filtre" class="tagsLibres">
        <!--        <li v-on:click="nouveauFiltre(filtre)"><span class="niveauInamovible"></span>{{ filtre }}-->
        <li @click="!editMode ? nouveauFiltre($event, filtre) : ''">
          <span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ filtre }}
          <span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
          <span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
        <li hidden="hidden" class="blocLibre"><span class="niveauInamovible"></span>
          <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
          <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
          <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>

        <ul v-for="filtre in filtresNiveauDeux(filtre)" :key="filtre" class="tagsLibres cache">
          <li  @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibre">
            <span  :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreDeux(filtre)}}
            <span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
            <span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>

          <li hidden="hidden" class="blocLibreDeux"><span class="niveauInamovible"></span>
            <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
            <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
            <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>

          <ul v-for="filtre in filtresNiveauTrois(filtre)" :key="filtre" class="tagsLibres cache">
            <li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreDeux">
              <span  :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreTrois(filtre) }}
              <span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
              <span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>

            <li hidden="hidden" class="blocLibreTrois"><span class="niveauInamovible"></span>
              <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
              <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
              <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>

            <ul v-for="filtre in filtresNiveauQuatre(filtre)" :key="filtre" class="tagsLibres cache">
              <li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreTrois">
                <span  :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ affichageFiltreQuatre(filtre) }}
                <span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre($event, filtre)"></span>
                <span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
              <li hidden="hidden" class="blocLibreQuatre"><span class="niveauInamovible"></span>
                <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
                <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
                <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
            </ul>
          </ul>
        </ul>
      </ul>
    </ul>
  </div>
</template>

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

export default {
  name: "Filtre_Tag_Libre",
  props: {
    // permet de déterminer si on est en mode tag_libre ou tag_fixe
    filtreChoisi: {},
    // l'auteur en cours
    auteur: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // Est-on en mode gestion ou en mode filtre
    modeGestion: {}
  },
  data: function () {
    return {
      filtresLibres: [],
      nouveauTagLibre: false,
      nouveauTagEchelonLibre: false,
      nouveauTexteLibre: '',
      editMode: false
    }
  },
  methods: {
    /**
     * @vuese
     * permet l'activation / desactivation des échelons de tag
     * si le span n'est pas navigable, ne rien faire
     */
    naviguer: function (e) {
      if (e.offsetX > e.target.offsetLeft) {
        this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
      }
      else{
        e.target.classList.toggle("niveau-down")
        e.target.parentNode.nextElementSibling.nextElementSibling.classList.toggle('affiche')
      }
    },
    /**
     *
     * quand on clique sur un filtre on l'envoie dans le "circuit"
     */
    nouveauFiltre: function (event, filtre) {

      // bricolage pour empecher qu'un filtre ne soit créé quand on clique sur une flèche pour activer / desactiver l'arborescence
      if(event.target.tagName !== 'SPAN')
        this.$emit("creer_filtre", {filtre: filtre, type: this.filtreChoisi})
     // alert("filtre" + filtre === undefined + " now loading")
    },
    /**
     * @vuese
     * suppression (définitive) d'un tag libre
     */
    supprimerTagLibre: function (e, filtreClique) {
      Service.supprimerTagLibre(this.auteur, filtreClique)
      this.filtresLibres = this.filtresLibres.filter(filtre => filtre !== filtreClique)
    },
    /**
     * @vuese
     * affichage de la saisie du nouveau tag
     */
    ajouterTagLibre: function (e) {
      let tagRacine = e.target.parentNode.innerText
      if (tagRacine === "nouveau tag libre"){
        this.nouveauTagLibre = !this.nouveauTagLibre
      } else {
        e.target.parentNode.nextElementSibling.hidden = !e.target.parentNode.nextElementSibling.hidden
      }
    },
    /**
     * @vuese
     * ajout (permanent) d'un tag libre (echelon 1)
     */
    creerTagLibre: function () {
      // this.filtresLibres.push(this.nouveauTexteLibre)
      let that = this
      this.nouveauTagLibre = false
      let data = {auteur: this.auteur, tag: this.nouveauTexteLibre, id_contenu: ""}
      Service.ajouterTagLibre(data).then(function () {
        Service.recupererTagLibre(that.auteur).then(function (response) {
          that.filtresLibres = response.data
        })
      })
      this.nouveauTexteLibre = ""
    },
    /**
     * @vuese
     * ajout (permanent) d'un tag libre (echelon 2 et supérieurs)
     */
    creerTagLibreEchelon: function(event, tag){
      //this.filtresLibres.push(tag + "/" + this.nouveauTexteLibre)
      let that = this
      let data = {auteur: this.auteur, tag: tag + "/" + this.nouveauTexteLibre, id_contenu: ""}
      Service.ajouterTagLibre(data).then(function () {
        Service.recupererTagLibre(that.auteur).then(function (response) {
          that.filtresLibres = response.data
        })
      })
      this.nouveauTexteLibre = ""
      event.target.parentNode.hidden = true
    },
    /**
     * @vuese
     * masquage de la zone de saisie d'un nouveau tag
     */
    masquerTagLibre: function (e) {
      this.nouveauTagLibre = false
      //alert("Par la barbe de Pipien Velletier")
      e.target.parentNode.hidden = !e.target.parentNode.hidden
    },
    /**
     * @vuese
     * masquage de la zone de saisie d'un nouveau tag après input clavier
     */
    keymonitor: function(event) {
      if (event.key === "Escape") {
        this.nouveauTagLibre = false
      }
    },
    /**
     * @vuese
     * raffinage de l'affichage des filtres de niveau 2
     */
    affichageFiltreDeux: function(tag) {
      return tag.substring(tag.indexOf("/") + 1)
    },
    /**
     * @vuese
     * raffinage de l'affichage des filtres de niveau 3
     */
    affichageFiltreTrois: function(tag) {
      let prout = tag.substring(tag.indexOf("/") + 1)
      return prout.substring(prout.indexOf("/") + 1)
    },
    /**
     *  @vuese
     *  raffinage de l'affichage des filtres de niveau 4
     */
    affichageFiltreQuatre: function(tag) {
      let prout = tag.substring(tag.indexOf("/") + 1)
      prout = prout.substring(prout.indexOf("/") + 1)

      return prout.substring(prout.indexOf("/") + 1)
    },
    /**
     * @vuese
     * fonction permettant l'extraction des sous filtres de niveau 2 (en fct du filtre en cours)
     */
    filtresNiveauDeux: function (filtre) {

      let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))
      return prout.filter(tag => (tag.split("/")).length === 2)
    },
    /**
     * @vuese
     * fonction permettant l'extraction des sous filtres de niveau 3 (en fct du filtre en cours)
     */
    filtresNiveauTrois: function (filtre) {

      let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))

      return prout.filter(tag => (tag.split("/")).length === 3)
    },
    /**
     * @vuese
     * fonction permettant l'extraction des sous filtres de niveau 4 (en fct du filtre en cours)
     */
    filtresNiveauQuatre: function (filtre) {

      let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))

      return prout.filter(tag => (tag.split("/")).length === 4)
    },
    /**
     * @vuese
     * Permet de déterminer si un filtre libre possède des "sous embranchements" ou non
     */
    isSousEmbranchement: function(filtre){
      // Determiner a quel "niveau" de filtre on est
      let niveauFiltre = filtre.split("/").length - 1
      // Et calculer le nombre de "sous embranchements"
      let sousEmbranchements = -1
      switch (niveauFiltre){
        case 0:
          sousEmbranchements = this.filtresNiveauDeux(filtre)
          break
        case 1:
          sousEmbranchements = this.filtresNiveauTrois(filtre)
          break
        case 2:
          sousEmbranchements = this.filtresNiveauQuatre(filtre)
          break
      }
      return sousEmbranchements.length
    }
  },
  watch: {
    /**
     * @vuese
     * Des que le filtre tag libre est choisi, on récupère les tags libres de l'auteur
     */
    filtreChoisi: function () {
      let that = this
      this.editMode = false
      Service.recupererTagLibre(this.auteur).then(function (response) {
        that.filtresLibres = response.data
      })
    },
    modeGestion: function () {
      let that = this
      this.editMode = true
      Service.recupererTagLibre(this.auteur).then(function (response) {
        that.filtresLibres = response.data
      })    }
  },
  computed:{
    /**
     * @vuese
     * permet de selectionner les tags d'échelon 1 ("racine")
     */
    filtresNiveauUn: function () {

      return this.filtresLibres.filter(tag => (tag.split("/")).length === 1)
    }

  }
}
</script>

<style scoped>

.menuNonFinal {
  list-style-type: none;
}

.arborescenceLibre {
  padding-inline-start: 4px;
  margin-left: 10px;
}

.editArborescenceLibre {
  margin-top: 5vh;
  margin-left: 55vh;
}

.tagsLibres {
  list-style-type: none;
  padding-inline-start: 0px;
}

.blocLibre {
  padding-inline-start: 20px;
}
.blocLibreDeux {
  padding-inline-start: 40px;
}
.blocLibreTrois {
  padding-inline-start: 60px;
}
.blocLibreQuatre {
  padding-inline-start: 80px;
}

#arborescence {
  padding: 4px;
  text-align: left;
  margin: 0 0 0 10px;
}

.niveau {
  user-select: text;
}

body {
  cursor: pointer;
}

.niveau::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.niveau-down::before {
  transform: rotate(90deg);
}

.niveauInamovible::before {
  content: "\23F9";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  padding-bottom: -50px;

}

.poubel::before {
  content: "\01F5D1";
  color: orange;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.poubelDark::before {
  content: "\01F5D1";
  color: white;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
}

.validerCoche::before {
  content: "\2713";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.annulerCoche::before {
  content: "\2717";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}


.validerCocheDark::before {
  content: "\2713";
  color: white;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.annulerCocheDark::before {
  content: "\2717";
  color: white;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.nouveauTagLibre::before {
  content: "\002295 ";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  margin-top: -50px;
}

.nouveauTagLibreDark::before {
  content: "\002295 ";
  color: white;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  margin-top: -50px;
}

.nouvelEchelon::before {
  content: "\002B";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  padding-bottom: -50px;

}

.nouvelEchelonDark::before {
  content: "\002B";
  color: white;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  padding-bottom: -50px;

}

.niveau-down::before {
  transform: rotate(90deg);
}

.cache {
  display: none;
}

.affiche {
  display: block;
}

.element{
  display: flex;
}

li {
  width: fit-content;
  white-space: nowrap;
}

/*.modeCreation{
  pointer-events: visible;
}*/


</style>