<template>
  <div>
    <component :question="question" :pIndex="pIndex" :index="index" @edit="edit" :is="comps[question.type]"  />
  </div>
</template>

<script>
import RadioGroupQuestion from './RadioGroupQuestion'
import CheckboxQuestion from './CheckboxQuestion'
import DropdownQuestion from './DropdownQuestion'
import MultipleSelectQuestion from './MultipleSelectQuestion'
import HtmlQuestion from './HtmlQuestion'
import TextQuestion from './TextQuestion'
import MultiTextQuestion from './MultiTextQuestion'
import CommentQuestion from './CommentQuestion'
import DateQuetion from './DateQuestion'
import MatrixQuestion from './MatrixQuestion'
import MatrixDropdownQuestion from './MatrixDropdownQuestion'
import MatrixDynamicQuestion from './MatrixDynamicQuestion'
import ImagePickerQuestion from './ImagePickerQuestion'
import FileQuestion from './FileQuestion'
import SortableQuestion from './SortableQuestion'
import RatingQuestion from './RatingQuestion'

export default {
  name: 'QuestionRouter',
  components: {
  },
  props: ['question', 'index', 'pIndex'],
  data: function () {
    return {
      comps: {
        rating: RatingQuestion,
        radiogroup: RadioGroupQuestion,
        checkbox: CheckboxQuestion,
        dropdown: DropdownQuestion,
        panel: MultipleSelectQuestion,
        html: HtmlQuestion,
        text: TextQuestion,
        multipletext: MultiTextQuestion,
        comment: CommentQuestion,
        bootstrapdatepicker: DateQuetion,
        matrix: MatrixQuestion,
        matrixdropdown: MatrixDropdownQuestion,
        matrixdynamic: MatrixDynamicQuestion,
        imagepicker: ImagePickerQuestion,
        file: FileQuestion,
        sortablelist: SortableQuestion
      }
    }
  },
  methods: {
    edit (data) {
      this.$emit('edit', {
        ...data,
        index: this.index
      })
    }
  },
  created () {
  }
}
</script>
