<template>
    <div v-for="(q, i) in questions" :key="i">
        <transition appear name="fade" mode="out-in">
            <buttonQuestion
                v-if="q.questionSequence === currentQuestion"
                class="radioQuestion"
                :questionText="q.questionText"
                :answers="q.answers"
                :groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`"
                textPosition="text-start"
                v-model="selectedValue"
                :isRequired=true
                :validationRules="validationRules"
                :clearOnUnmount=false
            />
        </transition>
    </div>
</template>

<script>
import buttonQuestion from "@/common-components/button-question/button-question";

export default {
  name: "questionChain",
  data() {
    return {
      currentQuestion: 1,
      answeredQuestions: [],
    };
  },
  props: {
    questionData: Object,
    validationRules: String,
    modelValue: Array,
  },
  computed: {
      
    questions() {
        const questions = this.questionData.partQuestions.map((q, i) => {
            return {
                questionText: q.questionText,
                questionSequence: q.questionSequence,
                answers: q.answers.map((a) => {
                    return {
                        Text: a.answerText,
                        // Name will either be nextQuestionSequence or answerResult
                        Name: a.nextQuestionSequence ? a.nextQuestionSequence : "answer-" + a.answerResult,
                        nextQuestionSequence: a.nextQuestionSequence,
                        answerResult: a.answerResult,
                    }
                })
            }
        });
        // add an empty item to be array[0] since we start with 1
        questions.unshift({ "DeliberatelyBlankObject": "This object has been added as a placeholder only for question #0"});
        return questions;
    },
    selectedValue: {
      get: function() {
        return this.modelValue;
      },
      set: function(returnedAnswer) {
        const isNewModelValueComplete = this.getNewModelValue(returnedAnswer);

        if (isNewModelValueComplete) {
            this.$emit("update:modelValue", isNewModelValueComplete);
        }
      }
    }
  },
  methods: {
    getNewModelValue(returnedAnswer) {
        if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false }
        const lastAnswer = returnedAnswer[returnedAnswer.length - 1];
        const currentQuestion = this.questions[this.currentQuestion];

        if (lastAnswer.indexOf("answer-") === 0) {
            // if it is an answerResult
            const finalAnswer = lastAnswer.slice(7);

            const currentQuestionSelectedAnswer = currentQuestion.answers.find(
                ({ answerResult }) => answerResult === finalAnswer
            );

            // add current item to list of answered questions
            this.answeredQuestions.push(
                {
                    questionText: currentQuestion.questionText,
                    selectedAnswerText: currentQuestionSelectedAnswer.Text,
                }
            );

            return {
                answerResult: finalAnswer,
                answeredQuestions: this.answeredQuestions,
            };
        } else {
            const currentQuestionSelectedAnswer = currentQuestion.answers.find(
                ({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer)
            );

            // add current item to list of answered questions
            this.answeredQuestions.push(
                {
                    questionText: currentQuestion.questionText,
                    selectedAnswerText: currentQuestionSelectedAnswer.Text,
                }
            );

            this.currentQuestion = parseInt(lastAnswer); // update count to display next question
            return false;
        }
    }
  },
  components: {
    buttonQuestion,
  },
};
</script>