<template>
  <div id="full">
    <div id="body" :class="darktheme ? 'editDark' : 'edit'">
      <table style="width: 100%">

        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Nom de la question</td>
          <td style="width: 70%; text-align: left">
            <input type="text" style="height: 25px" v-model="nomQuestion"/></td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Texte de la question</td>
          <td style="width: 70%">
            <quill-editor toolbar="minimal" style="height: 100px; margin-top: -66px" v-model="texteQuestion"/>
          </td>
        </tr>
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Note par défaut</td>
          <td style="width: 70%; text-align: left">
            <input type="text" style="height: 25px"  v-model="noteDefaut"/></td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback général</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px"  v-model="generalFeedback"/>
          </td>
        </tr>
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Plusieurs réponses ou une seule?</td>
          <td style="width: 70%; text-align: left; padding-top: 4vh">
            <select v-model="multipleChoisie">
              <option>Réponses multiples autorisées</option>
              <option>Une seule réponse</option>
            </select>
            <br>
            <input type="checkbox" style="margin-top: -0.25vh; margin-right: 0.25vw" v-model="isShuffle">
            <label style="margin-top: -0.25vh">Mélanger les réponses</label>
          </td>
        </tr>
        <tr>
          <td style="width: 30%; text-align: left"></td>
          <td style="width: 70%; text-align: left">

          </td>
        </tr>
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Numéroter les choix?</td>
          <td style="width: 70%; text-align: left">
            <select v-model="optionNumChoisie">
              <option v-for="i in optionsNumerotation.length" :key="i">{{ optionsNumerotation[i-1] }}</option>
            </select>
          </td>
        </tr>

        <template v-for="j in reponses.length" style="background: brown">

          <tr style="height: 225px" :key="j + 'reponse'">
            <td style="width: 30%; text-align: left">Réponse {{ j }}</td>
            <td style="width: 70%">
              <quill-editor style="height: 100px; margin-top: -66px" v-model="reponses[j - 1]"/>
            </td>
          </tr>

          <tr style="height: 69px" :key="j + 'note'">
            <td style="width: 30%; text-align: left">Note</td>
            <td style="width: 70%; text-align: left">
              <select v-model="notes[j - 1]">
                <option v-for="i in options.length" :key="i">{{ options[i-1] }}</option>
              </select>
            </td>
          </tr>

          <tr style="height: 225px" :key="j + 'feedback'">
            <td style="width: 30%; text-align: left">Feedback</td>
            <td style="width: 70%">
              <quill-editor style="height: 100px; margin-top: -66px" v-model="feedbacks[j - 1]"/>
            </td>
          </tr>
        </template>
        <span id="nvelleReponse" @click="ajouterReponse"> Ajouter une réponse</span>

      </table>
      <button style="width: auto; height: auto; margin-left: -100px; position: fixed; bottom: 18px" v-on:click="action('modifier')">modifier</button>
      <button style="width: auto; height: auto; margin-left: -15px; position: fixed; bottom: 18px" v-on:click="action('arriere')">retour en arriere</button>

    </div>

  </div>
</template>

<script>
export default {
  name: "Edit_Choix_Multiple",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    //la question Parsee
    questionParsee: {}
  },
  data: function () {
    return {
      //questionParsee: '',
      nomQuestion: '',
      texteQuestion: '',
      noteDefaut: 0,
      isShuffle: false,
      generalFeedback: '',
      options: ["Aucun", "100%", "90%", "83.33%", "80%", "75%", "70%", "66.66%", "60%", "50%", "40%", "33.33%", "30%", "25%", "20%", "16.6667%", "14.28571%",
        "12.5%", "11.11%", "10%", "5%"],
      optionsNumerotation: ["a. b. c. etc.", "A. B. C. etc.", "1. 2. 3. etc.", "i. ii. iii. etc.", "I. II. III. etc.", "Sans numérotation"],
      reponses: [],
      notes: [],
      feedbacks: [],
      prefixes: [],
      optionNumChoisie: '',
      multipleChoisie: ''
    }
  },
  methods : {
    /**
     * @vuese
     * Récupération de l'action utilisateur
     *
     * @param actionChoisie
     */
    action: function (actionChoisie) {
      if (actionChoisie === 'arriere') {
        this.$emit("actionMoodle", {action: actionChoisie})
      } else {
        this.questionParsee.nom_question = this.nomQuestion
        this.questionParsee.intitule_question = this.texteQuestion
        this.questionParsee.note_defaut = this.noteDefaut
        this.questionParsee.feedback_general = this.generalFeedback

        this.questionParsee.liste_reponse = this.reponses
        this.questionParsee.liste_feedback = this.feedbacks
        this.questionParsee.liste_note = this.notes.map(note => note.substring(0, note.length-1))
        this.questionParsee.liste_note = this.questionParsee.liste_note.map(note => {if (note === 'Aucun') return '0'; else return note;})
        this.questionParsee.melange_reponse = this.isShuffle

        switch (this.questionParsee.numerotation) {
          case this.optionsNumerotation[0]:
            this.questionParsee.numerotation = "abc"
            break
          case this.optionsNumerotation[1]:
            this.questionParsee.numerotation = "ABCD"
            break
          case this.optionsNumerotation[2]:
            this.questionParsee.numerotation = "123"
            break
          case this.optionsNumerotation[3] :
            this.questionParsee.numerotation = "iii"
            break
          case this.optionsNumerotation[4] :
            this.questionParsee.numerotation = "IIII"
            break
          case this.optionsNumerotation[5]:
            this.questionParsee.numerotation = "none"
            break
        }
        this.questionParsee.multipleChoisie = this.multipleChoisie === 'Une seule réponse' ? '1' : '0'

        /* this.feedbacks = this.questionParsee.liste_feedback
      this.reponses = this.questionParsee.liste_reponse
      this.notes = this.questionParsee.liste_note.map(note => note + "%")
      this.notes = this.notes.map(note => {if (note === '0%') return 'Aucun'; else return note;})*/

        this.$emit("actionMoodle", {action: actionChoisie, questionParsee: this.questionParsee})
      }
    },
    /**
     * @vuese
     * Ajouter une réponse au contenu
     */
    ajouterReponse: function () {
      this.reponses.push("")
      this.notes.push(this.options[0])
      this.feedbacks.push("")
    }
  },
  watch: {
    questionParsee: function () {
      if (this.questionParsee.type_question === 'multichoice') {

        this.nomQuestion = this.questionParsee.nom_question
        this.texteQuestion = this.questionParsee.intitule_question
        this.noteDefaut = this.questionParsee.note_defaut
        this.generalFeedback = this.questionParsee.feedback_general
        this.feedbacks = this.questionParsee.liste_feedback
        this.reponses = this.questionParsee.liste_reponse
        this.notes = this.questionParsee.liste_note.map(note => note + "%")
        this.notes = this.notes.map(note => {if (note === '0%') return 'Aucun'; else return note;})


        switch (this.questionParsee.numerotation) {
          case "abc":
            this.optionNumChoisie = this.optionsNumerotation[0]
            break
          case "ABCD":
            this.optionNumChoisie = this.optionsNumerotation[1]
            break
          case "123":
            this.optionNumChoisie = this.optionsNumerotation[2]
            break
          case "iii" :
            this.optionNumChoisie = this.optionsNumerotation[3]
            break
          case "IIII" :
            this.optionNumChoisie = this.optionsNumerotation[4]
            break
          case "none":
            this.optionNumChoisie = this.optionsNumerotation[5]
            break
        }

        this.isShuffle = this.questionParsee.melange_reponse

        if (this.questionParsee.nb_reponse){
          this.multipleChoisie = "Une seule réponse"
        } else {
          this.multipleChoisie = "Réponses multiples autorisées"
        }
      }
    },

  }
}
</script>

<style scoped>
label {
  margin-right: 5px;
  margin-top: 10px;
}

.edit {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  height: 79.35vh;
  background: whitesmoke;
}

.editDark {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  height: 79.35vh;
  background: darkslategray;
  color: whitesmoke;
}


#body {
  overflow-y: auto;
}

#full {
  height: 79.35vh;
  width: 110%;
  background: white;
  margin-top: -1.75vh;
}

.column {
  flex: 50%;
}
td > * {
  vertical-align: middle;
}

#nvelleReponse::before {
  content: "\002B";
}

#nvelleReponse {
  text-decoration: underline;
}

</style>