<template>
  <div>
    <draggable
      v-if="survey.questions.length > 0"
      v-model="survey.questions"
      class="questions-wrapper"
      draggable=".question-row"
      @start="drag = true"
      @end="dragEnd"
    >
      <transition-group>
        <editor-question-row
          v-for="(question, index) in survey.questions"
          :key="question.id"
          :question="question"
          :survey="survey"
          :index="index"
          :class="{ 'question-row-active': question.active }"
          @click.native="chooseQuestion(question)"
          :id="question.id"
        ></editor-question-row>
      </transition-group>
    </draggable>
    <div v-else class="no-data">
      <img class="empty-icon" src="../../images/empty.svg" />
      <p class="empty-desc">{{ t("survey_creator.question.no_data") }}</p>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import draggable from "vuedraggable";
import EditorQuestionRow from "./editor-question-row.vue";
import { QuestionType, SurveyModel } from "@wg-npm/survey-core";
import { BaseQuestionModel } from "@wg-npm/survey-core";
import LocaleMixin from "../../mixins/locale-mixin";
import _ from "lodash";

export default Vue.extend({
  name: "editor-questions",
  components: { EditorQuestionRow, draggable },
  mixins: [LocaleMixin],
  props: {
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  methods: {
    dragEnd(event) {
      if (event.newIndex === event.oldIndex) {
        return;
      }
      BaseQuestionModel.rebuildQuestionNumber(this.survey.questions);
    },
    chooseQuestion(question) {
      BaseQuestionModel.setActiveQuestion(question, this.survey.questions);
    },
  },
});
</script>
