<template>
  <Dropdown :transfer="true">
    <Button icon="md-add" type="primary"
      >{{ t("survey_creator.question.create") }}
    </Button>
    <DropdownMenu slot="list">
      <DropdownItem
        v-for="questionType in questionTypes"
        :key="questionType"
        class="dropdown_item"
        @click.native="onCreate(questionType)"
        >{{ t(`survey_creator.question.types.${questionType}`) }}
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
</template>
<script lang="ts">
import Vue from "vue";
import { QuestionType } from "@wg-npm/survey-core";
import { Button, Dropdown, DropdownItem, DropdownMenu } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";

export default Vue.extend({
  name: "create-question-dropdown",
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  components: { Dropdown, DropdownMenu, DropdownItem, Button },
  props: {
    options: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      questionTypes: [
        QuestionType.SINGLE_SELECTION,
        QuestionType.MULTI_SELECTION,
        QuestionType.FILL_BLANK,
        QuestionType.SHORT_ANSWER,
        QuestionType.MATRIX,
        QuestionType.TEXT_TITLE,
        QuestionType.EVALUATION,
      ],
    };
  },
  created() {
    if (!this.options.enabledSpeciallyQuestions) {
      // @ts-ignore
      _.remove(this.questionTypes, (index) => {
        return index == QuestionType.EVALUATION;
      });
    }
    if (this.options.enabledScoringQuestion) {
      this.questionTypes.push(QuestionType.SCORING);
    }
  },
  methods: {
    onCreate(type) {
      this.$rootComponent.createQuestion(type);
    },
  },
});
</script>
