const markups = [
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="intro p1" data-content1='<p class="intro p1">' data-content2="</p>">Paragraph&nbsp;1</p>
      <p class="intro p2" data-content1='<p class="intro p2">' data-content2="</p>">Paragraph&nbsp;2</p>
    </section>`,
    `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="green red" data-content1='<p class="green red">' data-content2="</p>">Paragraph</p>
    </section>`,
  `<form id="section1" class="section1" data-content1='<form>' data-content2="</form>">
      <label for="name" data-content1='<label>' data-content2="</label>">Your Name
      <input class="info" type="text" value='<input class="info" type="text">'>
    </label>
    </form>`,
      `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="red" data-content1='<p class="red">' data-content2="</p>">Paragraph</p>
    </section>`,
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p style="color:green;"><span class="fakepseudo">&lt;p style="color:<span class='helper' style='background:green;'></span>green;"&gt;</span>Paragraph<span class="fakepseudo">&lt;/p&gt;</span></p>
    </section>`,
  `<section id="section1" class="section1" data-content1='<section id="section1" class="section1">' data-content2="</section>">
      <h2 class="title" data-content1='<h2 class="title">' data-content2="</h2>">About Yoda</h2>
      <p class="intro p1" data-content1='<p class="intro p1">' data-content2="</p>">Paragraph&nbsp;1</p>
      <div data-content1='<div>' data-content2="</div>">
        <p class="intro p2" data-content1='<p class="intro p2">' data-content2="</p>">Paragraph&nbsp;2</p>
      </div>
    </section><div></div>`
]
const questions = [
   {
    'proposals': ['section p', '.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section p</em> and <em>.p1</em> target the highlighted element. The specificity of <em>section p</em> is 0.0.0.0.2 and <strong><em>.p1</em> is 0.0.0.1.0</strong>'
  },
  {
    'proposals': ['.section1 p', '.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>.section1 p</em> and <em>.p1</em> target the highlighted element. The specificity of <strong><em>.section1 p</em> is 0.0.0.1.1</strong> and <em>.p1</em> is 0.0.0.1.0'
  },
  {
    'proposals': ['.p1', 'section p'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>.p1</em> and <em>section p</em> target the highlighted element. The specificity of <strong><em>.p1</em> is 0.0.0.1.0</strong> and <em>section p</em> is 0.0.0.0.2'
  },
  {
    'proposals': ['#section1', 'p'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 0,
    'why': 'The <em>#section1</em> selector targets the highlighted element(s) parent. <em>p</em> would inherit its parent\'s color only if there is no color applied directly to paragraphs.'
  },
  {
    'proposals': ['#section1 *', 'p.intro.p1'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'red',
    'template': 0,
    'why': 'Both <em>#section1 *</em> and <em>p.intro.p1</em> target the highlighted element. The universal selector (*) has no specificity value. The specificity of <strong><em>#section1 *</em> is 0.0.1.0.0</strong> and <em>p.intro.p1</em> is 0.0.0.2.1'
  },
  {
    'proposals': ['section *', 'p'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section *</em> and <em>p</em> target the highlighted element. The specificity of <em>section *</em> is 0.0.0.0.1. The specificity of <strong><em>p</em> is also 0.0.0.0.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section .p1', 'section :nth-child(2)'],
    'answers': ['red', 'green'],
    'selector': '.p1',
    'answer': 'green',
    'template': 0,
    'why': 'Both <em>section .p1</em> and <em>section :nth-child(2)</em> target the highlighted element. The specificity of <em>section .p1</em> is 0.0.0.1.1. The specificity of <strong><em>section :nth-child(2)</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section > p', 'section p'],
    'answers': ['red', 'green'],
    'selector': 'section > p',
    'answer': 'green',
    'template': 5,
    'why': 'Both <em>section > p</em> and <em>section p</em> target the highlighted element. The specificity of <em>section > p</em> is 0.0.0.0.2. The specificity of <strong><em>section p</em> is also 0.0.0.0.2 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': [':only-child', 'p'],
    'answers': ['red', 'green'],
    'selector': 'div > p',
    'answer': 'red',
    'template': 5,
    'why': 'Both <em>:only-child</em> and <em>p</em> target the highlighted element. The specificity of <strong><em>:only-child</em> is 0.0.0.1.0</strong> and <em>p</em> is 0.0.0.0.1'
  },
  {
    'proposals': ['.red', '.green'],
    'answers': ['red', 'green'],
    'selector': 'p',
    'answer': 'green',
    'template': 1,
    'why': 'Both <em>.red</em> and <em>.green</em> target the highlighted element. The specificity of <em>.red</em> is 0.0.0.1.0. The specificity of <strong><em>.green</em> is also 0.0.0.1.0 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['.green', '.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'red',
    'template': 1,
    'why': 'Both <em>.red</em> and <em>.green</em> target the highlighted element. The specificity of <em>.green</em> is 0.0.0.1.0. The specificity of <strong><em>.red</em> is also 0.0.0.1.0 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['section :not(.title)', '.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'green',
    'template': 3,
    'why': 'Both <em>section :not(.title)</em> and <em>.red</em> target the highlighted element. The specificity of <strong><em>section :not(.title)</em> is 0.0.0.1.1</strong> and <em>.red</em> is 0.0.0.1.0'
  },
  {
    'proposals': ['section :not(.title)', 'p.red'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'red',
    'template': 3,
    'why': 'Both <em>section :not(.title)</em> and <em>p.red</em> target the highlighted element. The specificity of <em>section :not(.title)</em> is 0.0.0.1.1 .The specificity of <strong><em>p.red</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  },
  {
    'proposals': ['p', '#section1 p'],
    'answers': ['green', 'red'],
    'selector': 'p',
    'answer': 'green',
    'template': 4,
    'why': 'Both <em>p</em> and <em>#section1 p</em> target the highlighted element. The specificity of <em>#section1 p</em> is 0.0.1.0.1 but the highlighted element has also an <strong>inline style that wins (0.1.0.0.0)</strong>'
  },
  {
    'proposals': ['p', '#section1 p'],
    'answers': ['red', 'green'],
    'colorvalues': ['red!important', 'green'],
    'selector': 'p',
    'answer': 'red',
    'template': 4,
    'why': 'The highlighted element has an inline style (0.1.0.0.0) but the <strong><em>p</em> selector uses !important which wins even with the inline styles (1.0.0.0.1)</strong>'
  },
  {
    'proposals': ['form input[type="text"]', 'form .info'],
    'answers': ['red', 'green'],
    'selector': 'input',
    'answer': 'red',
    'template': 2,
    'why': 'Both <em>form input[type="text"]</em> and <em>form .info</em> target the highlighted element. The specificity of <strong><em>form input[type="text"]</em> is 0.0.0.1.2</strong> and <em>form .info</em> is 0.0.0.1.1.'
  },
  {
    'proposals': ['input[type="text"]', 'input.info'],
    'answers': ['red', 'green'],
    'selector': 'input',
    'answer': 'green',
    'template': 2,
    'why': 'Both <em>input[type="text"]</em> and <em>input.info</em> target the highlighted element. The specificity of <em>input[type="text"]</em> is 0.0.0.1.1. The specificity of <strong><em>input.info</em> is also 0.0.0.1.1 but it comes later in the stylesheet.</strong>'
  }
]

Vue.component( 'css', {
  props: ['q', 'answers'],
  computed: {
    displayCSS() {
      return this.q.reduce( (acc, curr, index) => `${acc}${curr} {<br>&nbsp;&nbsp;color: <span class="helper" style="background:${this.answers[index]}"></span>${this.answers[index]};<br>}<br>`, '' );
    }
  },
  template: `<pre v-html="displayCSS" class="code"></pre>`
})

Vue.component( 'question', {
  props: ['v', 'q', 'answers', 'disabled', 'correct'],
  data() {
    return {
      answer: '',
      a: []
    }
  },
  computed: {
    checked: {
      get() {
        return this.v
      },
      set(val) {
        this.a = val
      }
    }
  },
  template: `<div>
<div :class="['label-ctnr', disabled ? 'disabled': '']"><label :class="[ feedbackClass(item), checkedClass(item)]" v-for="(item, i) in answers">
<span v-if="disabled && isChecked(item)">
<svg v-if="isCorrectChecked(item)" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">  
  <polyline class="path check" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">  
  <line class="path line" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#ffffff" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg>
</span>
<input @change="answerChecked" type="radio" :id="item" :value="item" v-model="checked" :disabled="disabled"/><span v-html="itemWithColor(item)"></span></label></div>

<button v-if="answer" type="button" @click="submitAnswer">Answer</button>
</div>`,
  methods: {
    answerChecked() {
      this.$emit('answered', this.a )
    },
    checkedClass(item) {
        return this.isChecked(item) ? 'checked' : 'not-checked'
    },
    isChecked(item) {
      return item === this.checked 
    },
    isCorrectChecked(item) {
      return item === this.checked && item === this.correct
    },
    feedbackClass(item) {
        if (!this.disabled) {
          return
        }
      return item === this.correct ? 'correct' : 'wrong'
    },
    itemWithColor(item) {
      return `<span class="helper" style="background:${item}"></span>${item}`
    }
  }
}
)

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});

Vue.component('pagedoc', {
  props: ['markup'],
  template: "#markup",
  data() {
		return {}
	}
});

Vue.component( 'finalresults', {
  props: [ 'finalpercentage'],
  template: "#finalresults"
});

new Vue({
  el: '#app',
  data() {
    return {
      currentIndex: 0,
      checkedAnswers: [],
      v: [],
      score: 0,
      questions: [],
      isIdle: true,
      askedForResults: false
    }
  },
  computed: {
    total() {
      return this.questions.length 
    },
    finalPercentage() {
      return `${Math.round(this.score/this.total*100)}%`
    },
    proposals() {
      return this.questions[this.currentIndex].proposals
    },
    selector() {
      return this.questions[this.currentIndex].selector
    },
    answer() { 
       return this.questions[this.currentIndex].answer
    },
    colorvalues() {
      const q = this.questions[this.currentIndex]
      if (typeof q.colorvalues !== 'undefined') {
        return q.colorvalues
      }
       return q.answers
    },
    why() {
      return this.questions[this.currentIndex].why || ''
    },
    answers() { 
       return this.questions[this.currentIndex].answers
    },
    isAnswered() {
      return this.v.length !== 0
    },
    disabled() {
      return this.v.length !== 0
    },
    isFinished() {
      return this.currentIndex === this.total - 1
    },
    shouldShowNext() {
      return this.isAnswered && !this.isFinished
    },
    allDone() {
      return this.isAnswered && this.isFinished
    },
    displayPageDocCSS() {
      return this.proposals.reduce( (acc, curr, index) => ` ${acc} .page-doc ${curr} {color: ${this.colorvalues[index]}}`, '' );
    },
    templ() {
      return this.questions.length !== 0 ?markups[this.questions
[this.currentIndex].template] : ''
    }
  },
  methods: {
    start() {
      this.questions = questions
      //this.shuffle()
      this.isIdle = false
    },
    shuffle() {
      this.questions = questions.sort(function(a, b){return 0.5 - Math.random()}) 
    },
    go(r) {
      this.v = r
      this.addToScore()
      this.disabled = true
      this.isAnswered = true
    },
    addToScore() {
      if (this.checkAnswer()) {
        this.score++
      }
    },
    checkAnswer() {
      return this.v === this.questions[this.currentIndex].answer
    },
    resetStep() {
      this.isAnswered = false
      this.disabled = false
      this.v = []
    },
    displayNext() {
      this.currentIndex++
      this.resetStep()
    },
    playAgain() {
      this.score = 0
      this.start()
      this.currentIndex = 0
      this.askedForResults = false
      this.resetStep()
    },
    showResults() {
      this.askedForResults = true
    }
  }
})