<template>
  <div>
    <div style="text-align: center" v-show="isImportation">

      Je suis la page pour charger un contenu<br>

      <input type="file" name="fichier" @change="onUploadFiles"><br>
      <p style="color: red" v-show="fichierError">Aucun fichier uploadé</p>


      <div style="margin-top: 3vh" v-if="isNotXml">
        <label>Le fichier n'est pas de type xml</label><br>
        <label>Entrer le titre du fichier : </label><br>
        <input type="text" v-model="titreFichier" required="required" @change="removeError"/><br><br>
        <p style="color: red" v-show="titreError">Le descriptif du fichier est vide</p>
        <label>Entrer un descriptif associé au fichier : </label><br>
        <textarea  rows="7" cols="42" v-model="descriptifFichier" aria-required="true"></textarea>
        <p style="color: red" v-show="descriptifError">Le descriptif du fichier est vide</p>
      </div>

      <div class="markdown">
        <br>
        <button class="ajouterContenu" v-on:click="choisirTags">créer</button><br><br>
        <button class="retourArriere" v-on:click="retourArriere">revenir en arrière</button>

      </div>

    </div>
    <TagsFixes v-show="!isImportation" @tags="ajouterContenu"></TagsFixes>

  </div>

</template>

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


export default {
  name: "ImporterFichier",
  components: {TagsFixes},
  props: {
    // l'auteur connecté
    auteur: {}
  },
  data() {
    return {
      formData: null,
      isImportation: true,
      isNotXml: false,
      descriptifFichier: '',
      typeDocument: '',
      titreFichier: '',
      titreError: false,
      descriptifError: false,
      fichierError: false,
      nonTouche: true,
    }
  },
  methods: {
    /**
     * @vuese
     * Fonction pour déclencher l'affichage de la page pour choisir les tags fixes
     */

    choisirTags: function () {

      if (this.isNotXml) {
        this.nonTouche = false
        this.removeError()
        if (!this.descriptifError)
          this.descriptifError = this.descriptifFichier.length === 0
      }

      if (this.formData === null){
        this.fichierError = true
      } else if (!this.titreError && !this.descriptifError) {
        this.isImportation = false
      }
    },
    /**
     * @vuese
     * permet 'd'enrengistrer' le fichier uploadé via le formulaire
     */

    onUploadFiles: function (event) {
      this.formData = new FormData()
      if (event.target.files.item(0).type !== 'text/xml') {
        this.isNotXml = true
        this.typeDocument = event.target.files.item(0).type
      }
      this.formData.append('file', event.target.files.item(0))
      this.fichierError = false
    },
    /**
     * @vuese
     * Fonction pour revenir au panier
     */
    retourArriere: function () {
      // evenement pour retourner vers le volet Contenu_Base
      this.formData = ""
      this.titreFichier = ""
      this.descriptifFichier = ""
      this.isNotXml = false
      this.$emit("retourArriere")
    },
    /**
     * @vuese
     * Fonction permettant l'ajout du fichier en tant que contenu
     */
    ajouterContenu: function (event) {
      let that = this
      if (!this.isNotXml) {
        Service.uploaderContenuPerso(this.formData, this.auteur, JSON.stringify(event.tags)).then(
            function (reponse) {
              let nouveauContenu = reponse.data
              nouveauContenu.provenance = "perso"
              nouveauContenu.tags_libres = []
              that.$emit("contenuAjoute", {contenu: nouveauContenu})
              that.contenuSaisi = ''
              that.retourArriere()
              that.isImportation = true
            }
        )
      } else {
        Service.uploaderContenuPersoNonXml(this.formData, this.auteur, JSON.stringify(event.tags), this.descriptifFichier,
            this.typeDocument, this.titreFichier).then(
            function (reponse) {
              let nouveauContenu = reponse.data
              nouveauContenu.provenance = "perso"
              nouveauContenu.tags_libres = []
              that.$emit("contenuAjoute", {contenu: nouveauContenu})
              that.contenuSaisi = ''
              that.retourArriere()
              that.isImportation = true
            }
        )
      }
    },
    /**
     * @vuese
     * Enleve les messages d'erreur d'ajout de contenu non xml (titre)
     */
    removeError: function () {
      if (!this.nonTouche)
        this.titreError = this.titreFichier.length === 0

    }
  },
  watch: {
    /**
     * @vuese
     * Enleve les messages d'erreur d'ajout de contenu non xml (descriptif
     */
    descriptifFichier: function () {
      if (!this.nonTouche)
      this.descriptifError = this.descriptifFichier.length === 0
    }
  }
}
</script>

<style scoped>

button {
  align-items: center;
  width: auto;
  text-align: center;
  line-height: 1em;
}

</style>