<template>
  <Card :bordered="false" :dis-hover="true" :padding="0" class="question-row">
    <div
      :class="[
        'question-row-container',
        { 'question-row--selected': isSelectedQuestion },
        getClassStyle,
      ]"
    >
      <div v-if="enabledSelectQuestion" class="question-row-container-left">
        <Checkbox v-model="isSelectedQuestion" @on-change="onSelectQuestion" />
      </div>
      <div class="question-row-container-right">
        <span v-show="!questionTitleIncomplete" class="incomplete-tips">
          {{ t("survey_creator.question.incomplete_tips") }}
        </span>
        <Divider class="question-type-desc" orientation="left">
          {{
            t(
              `survey_creator.question.types.${question.type}`,
              $rootComponent.currentLanguage
            )
          }}
          <span
            v-if="enabledEvaluationTag && question.options.evaluationTag"
            class="evaluation-tag-label"
          >
            {{
              t(
                `survey_creator.question.evaluation_tag.${question.options.evaluationTag}`,
                $rootComponent.currentLanguage
              )
            }}
          </span>
        </Divider>
        <div class="question-title-header">
          <question-title
            :custom-question="currentCustomQuestion"
            :max-score="true"
            :question="question"
            style="flex: 1"
          />
          <Icon
            v-if="isPreviewMode"
            :class="[
              'collapse-toggle',
              { 'collapse-toggle--collapsed': !expanded },
            ]"
            type="ios-arrow-up"
            @click.stop="toggleExpand"
          />
        </div>
        <div v-show="expanded" class="question-row-content">
          <Form :disabled="isPreviewMode">
            <component
              :is="question.type"
              :question="question"
              :survey="survey"
              class="question"
              @singleQuestion="getJumpRules"
            />
          </Form>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts">
import Vue from "vue";
import { Card, Checkbox, Col, Divider, Form, Icon, Row } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import {
  BaseQuestionModel,
  QuestionType,
  SurveyModel,
} from "@wg-npm/survey-core";
import QuestionTitle from "../common/question-title.vue";
import SingleSelection from "../common/question/single-selection.vue";
import MultiSelection from "../common/question/multi-selection.vue";
import ShortAnswer from "../common/question/short-answer.vue";
import FillBlank from "../common/question/fill_blank.vue";
import TextTitle from "../common/question/text-title.vue";
import Matrix from "../common/question/matrix.vue";
import Scoring from "../common/question/scoring.vue";
import Evaluation from "../common/question/evaluation.vue";
import _ from "lodash";

export default Vue.extend({
  name: "previewer-question-row",
  components: {
    Checkbox,
    Row,
    Col,
    Divider,
    Card,
    Icon,
    Form,
    QuestionTitle,
    [QuestionType.SINGLE_SELECTION]: SingleSelection,
    [QuestionType.MULTI_SELECTION]: MultiSelection,
    [QuestionType.SHORT_ANSWER]: ShortAnswer,
    [QuestionType.FILL_BLANK]: FillBlank,
    [QuestionType.TEXT_TITLE]: TextTitle,
    [QuestionType.MATRIX]: Matrix,
    [QuestionType.SCORING]: Scoring,
    [QuestionType.EVALUATION]: Evaluation,
  },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
    customQuestion: {
      type: Object,
      required: false,
    },
    expanded: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enabledSelectQuestion: false,
      isSelectedQuestion: false,
      currentCustomQuestion: this.customQuestion,
      enabledEvaluationTag: false,
    };
  },
  created() {
    // @ts-ignore
    this.enabledSelectQuestion = _.get(
      this.$rootComponent,
      "options.enabledSelectQuestion",
      false
    );
    // @ts-ignore
    this.enabledQuestionTitleIncompleteTips = _.get(
      this.$rootComponent,
      "options.enabledQuestionTitleIncompleteTips",
      false
    );
    // @ts-ignore
    this.enabledEvaluationTag = _.get(
      this.$rootComponent,
      "options.enabledEvaluationTag",
      false
    );
  },
  computed: {
    isPreviewMode() {
      // @ts-ignore
      return _.get(this.$rootComponent, "options.isPreviewMode", false);
    },
    getClassStyle() {
      return this.questionTitleIncomplete ? "" : "question-incomplete";
    },
    questionTitleIncomplete() {
      if (!this.enabledQuestionTitleIncompleteTips) {
        return true;
      }
      let filledTitle = this.currentCustomQuestion?.filledTitle;
      if (_.isEmpty(filledTitle)) {
        return true;
      } else {
        return _.every(filledTitle, (t) => t.title !== "");
      }
    },
  },
  methods: {
    getJumpRules(val) {
      this.$emit("singleQuestion", val);
    },
    selectQuestion(val) {
      this.isSelectedQuestion = val;
    },
    onSelectQuestion(seleccted) {
      this.$emit("onSelectQuestion", seleccted, this.question);
    },
    toggleExpand() {
      this.$emit("toggle-expand");
    },
  },
});
</script>

<style lang="less" scoped>
.evaluation-tag-label {
  margin-left: 6px;
  font-size: 12px;
}
</style>
