const app = new Vue({
  el: '#app',
  data: {
    STARTSCREEN: 'STARTSCREEN',
    INGAME: 'INGAME',
    ENDSCREEN: 'ENDSCREEN',
    score: 0,
    mode: 'STARTSCREEN',
    currentQuestionID: 0,
    currentQuestionAnswerID: null,
    questions: null
  },
  computed: {
    currentQuestion: function () {
      return this.questions[this.currentQuestionID]
    },
    currentQuestionAnswered: function () {
      return this.currentQuestionAnswerID !== null
    }
  },
  beforeMount () {
    this.questions = []
    const questionCandidates = questionCatalog.slice()
    for (let i = 0; i < Math.min(20, questionCatalog.length); i++) {
      const index = Math.floor(Math.random() * questionCandidates.length)
      this.questions.push(questionCandidates[index])
      questionCandidates.splice(index, 1)
    }
  },
  methods: {
    enterGame: function (event) {
      this.mode = this.INGAME
      this.currentQuestionID = 0
    },
    addToScore: function (value) {
      this.score += value
    },
    evaluate: function (answerID) {
      if (!this.currentQuestionAnswered) {
        if (this.isCorrectAnswer(answerID)) {
          this.addToScore(3)
        }
        this.currentQuestionAnswerID = answerID
      }
    },
    showNextQuestion: function () {
      if (this.currentQuestionAnswered) {
        if (this.currentQuestionID + 1 < this.questions.length) {
          this.currentQuestionID++
          this.currentQuestionAnswerID = null
        } else {
          this.mode = this.ENDSCREEN
        }
      }
    },
    isCorrectAnswer: function (answerID) {
      return this.currentQuestion.correctAnswerID === answerID
    },
    isUserChoice: function (answerID) {
      return this.currentQuestionAnswered && (this.currentQuestionAnswerID === answerID)
    }
  }
})