<template>
  <div class="question-title">
    <label class="star">{{ question.options.required ? "*" : "" }}</label>
    <span v-if="question.header.number" class="number pl-sm">
      {{ question.header.number }}.
    </span>
    <question-title-dynamic
      v-if="question"
      :customFilledTitle="customFilledTitle"
      :splitedTitles="getTitle(question)"
    >
    </question-title-dynamic>
    <span v-if="haveMaxScore" class="options-explain pl-sm title-score-related">
      ({{
        t(`survey_creator.question.max_score`, $rootComponent.currentLanguage)
      }}{{ maxScore }})
    </span>
    <span
      v-if="haveScoreRange"
      class="options-explain pl-sm title-score-related"
    >
      ({{
        t(
          `survey_creator.question.scoring.scoreRange`,
          $rootComponent.currentLanguage
        )
      }}{{ scoreRange }})
    </span>
    <span v-if="haveStar" class="options-explain pl-sm">
      <span v-if="isSingleSelection">
        ({{
          t(
            `survey_creator.question.star_single`,
            $rootComponent.currentLanguage
          )
        }}
        <span> <Icon :size="16" color="orange" type="md-star" /> </span>
        )
      </span>
      <span v-else>
        (
        {{
          t(
            `survey_creator.question.star_single`,
            $rootComponent.currentLanguage
          )
        }}
        <Icon :size="16" color="orange" type="md-star" />
        {{
          t(
            `survey_creator.question.star_multi_prefix`,
            $rootComponent.currentLanguage
          )
        }}
        {{ question.options.starMinCount }}
        {{
          t(
            `survey_creator.question.star_multi_suffix`,
            $rootComponent.currentLanguage
          )
        }}
        )
      </span>
    </span>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {
  BaseQuestionModel,
  formatTitle,
  QuestionType,
} from "@wg-npm/survey-core";
import { Icon, Input } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import QuestionTitleDynamic from "./question-title-dynamic.vue";
import _ from "lodash";

export default Vue.extend({
  name: "question-title",
  components: { Icon, Input, QuestionTitleDynamic },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
    customQuestion: {
      type: Object,
      required: false,
    },
  },
  computed: {
    customFilledTitle() {
      return this.customQuestion?.filledTitle;
    },
    maxScore() {
      return BaseQuestionModel.getMaxScore(this.question);
    },
    haveScoreRange() {
      return this.question.type == QuestionType.SCORING;
    },
    scoreRange() {
      return BaseQuestionModel.getScoreRange(this.question);
    },
    haveMaxScore() {
      // @ts-ignore
      const scoringEnabled = _.get(
        this.question,
        "options.scoringEnabled",
        false
      );
      // @ts-ignore
      const titleScoringEnabled = _.get(
        this.question,
        "options.titleScoringEnabled",
        false
      );
      return (
        (scoringEnabled || titleScoringEnabled) &&
        this.question.type != QuestionType.SCORING
      );
    },
    haveStar() {
      // @ts-ignore
      return _.get(this.question, "options.starEnabled", false);
    },
    isSingleSelection() {
      return this.question.type == QuestionType.SINGLE_SELECTION;
    },
  },
  methods: {
    getTitle(question) {
      return formatTitle(question, Vue.$surveyLanguage);
    },
  },
});
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}

.pl-sm {
  padding-left: 4px;
}
</style>
