<template>
  <div class="question">
    <Row type="flex" justify="space-between" align="middle">
      <Col>
        <question-title
          :question="question"
          :custom-question="customQuestion"
          :max-score="true"
        />
      </Col>
      <Col>
        <edit-question-toolbar
          :enabled-jump="enabledJump"
          :question="question"
          :survey="survey"
          @on-edit="onEdit"
          @on-copy="onCopy"
          @on-delete="onDelete"
          @on-jump="onJump"
        ></edit-question-toolbar>
      </Col>
    </Row>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Col, Row } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import {
  BaseQuestionModel,
  CUSTOM_INPUT_REG,
  formatTitle,
  QuestionType,
  SurveyModel,
} from "@wg-npm/survey-core";
import QuestionTitle from "../common/question-title.vue";
import EditQuestionToolbar from "./editor-question-toolbar.vue";
import _ from "lodash";

export default Vue.extend({
  name: "question-default-layout",
  components: { Row, Col, QuestionTitle, EditQuestionToolbar },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  computed: {
    customQuestion() {
      let input_titles: any = [];
      _.each(formatTitle(this.question, Vue.$surveyLanguage), (t, index) => {
        if (CUSTOM_INPUT_REG.test(t)) {
          let title = {
            title: "",
            index: index,
          };
          input_titles.push(title);
        }
      });

      return {
        id: this.question.id,
        surveyId: this.survey.id,
        filledTitle: input_titles,
      };
    },
    enabledJump() {
      return (
        // @ts-ignore
        _.get(this.question, "type") === QuestionType.SINGLE_SELECTION &&
        // @ts-ignore
        _.get(this.$rootComponent, "options.enabledJump")
      );
    },
  },
  methods: {
    onEdit() {
      this.$rootComponent.onQuestionEdit(this.question.id);
    },
    onCopy() {
      this.$rootComponent.onQuestionCopy(this.question.id);
    },
    onDelete() {
      this.$rootComponent.onQuestionDelete(this.question.id);
    },
    onJump() {
      this.$rootComponent.onQuestionJump(this.question.id);
    },
  },
});
</script>
<style lang="less" scoped>
.question .ivu-row {
  flex-flow: row;
}
</style>
