<template>
  <component ref="question" :question="question" :is="types[question.type]"/>
</template>

<script>
import CheckboxEditor from './CheckboxEditor'
import RadioGroupEditor from './RadioGroupEditor'
import DropdownEditor from './DropdownEditor'
import MultipleSelectEditor from './MultipleSelectEditor'
import HtmlEditor from './HtmlEditor'
import TextEditor from './TextEditor'
import MultiTextQuestionEditor from './MultiTextQuestionEditor'
import CommentEditor from './CommentEditor'
import DateEditor from './DateEditor'
import MatrixEditor from './MatrixEditor'
import MatrixDropdownEditor from './MatrixDropdownEditor'
import MatrixDynamicEditor from './MatrixDynamicEditor'
import ImagePickerEditor from './ImagePickerEditor'
import FileEditor from './FileEditor'
import SortableEditor from './SortableEditor'
import RatingEditor from './RatingEditor'
export default {
  name: 'EditorRouter',
  props: ['oldQuestion'],
  data: function () {
    const question = {
      ...this.oldQuestion
    }
    return {
      question,
      types: {
        // checkbox: CheckboxEditor,
        checkbox: CheckboxEditor,
        radiogroup: RadioGroupEditor,
        dropdown: DropdownEditor,
        panel: MultipleSelectEditor,
        html: HtmlEditor,
        text: TextEditor,
        multipletext: MultiTextQuestionEditor,
        comment: CommentEditor,
        bootstrapdatepicker: DateEditor,
        matrix: MatrixEditor,
        matrixdropdown: MatrixDropdownEditor,
        matrixdynamic: MatrixDynamicEditor,
        imagepicker: ImagePickerEditor,
        file: FileEditor,
        sortablelist: SortableEditor,
        rating: RatingEditor
      }
    }
  }
}
</script>
