<template>
  <div class="question">
    <div v-if="question.options.titleScoringEnabled" class="main-score-hint">
      <span class="max-score-label">
        ({{
          t(
            "survey_creator.question.max_score",
            $rootComponent.currentLanguage
          )
        }}{{ mainMaxScore }})
      </span>
    </div>
    <div v-for="(subQuestion, index) in question.subQuestions" :key="index">
      <Divider
        v-if="!isPreview"
        class="question-type-desc"
        orientation="left"
        size="small"
        >{{
          t(
            "survey_creator.question.sub_questions",
            $rootComponent.currentLanguage
          )
        }}
      </Divider>
      <div class="sub-question-title">
        <label v-if="question.options.subRequired" class="require-label"
          >*</label
        >
        <span class="number"
          >{{ question.header.number }}.{{ subQuestion.number }}</span
        >
        <span class="content">{{ subQuestion.text | translate(true) }}</span>
        <span v-if="haveSubMaxScore && choiceMaxScore" class="sub-max-score"
          >({{
            t(
              `survey_creator.question.max_score`,
              $rootComponent.currentLanguage
            )
          }}{{ choiceMaxScore }})</span
        >
      </div>
      <RadioGroup>
        <Row :gutter="50" align="middle" justify="start" type="flex">
          <Col
            v-for="choice in question.choices"
            :key="choice.id"
            :class="choiceClasses"
          >
            <Radio :label="choice.id">
              <span class="choice-title">{{
                choice.text | translate(true)
              }}</span>
              <span v-if="haveSubMaxScore" class="choice-score">{{
                `(${choice.options.score || 0} ${t(
                  "survey_creator.question.scores",
                  $rootComponent.currentLanguage
                )})`
              }}</span>
            </Radio>
          </Col>
        </Row>
      </RadioGroup>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Col, Divider, Radio, RadioGroup, Row } from "view-design";
import LocaleMixin from "../../../mixins/locale-mixin";
import { QuestionMatrixModel, SurveyLayout } from "@wg-npm/survey-core";

export default Vue.extend({
  name: "matrix",
  components: { Row, Col, Radio, RadioGroup, Divider },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => QuestionMatrixModel,
      required: true,
    },
    maxScore: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // @ts-ignore
      choiceClasses: this.buildChoiceClasses(),
    };
  },
  watch: {
    "question.options.layout"() {
      handler: {
        this.choiceClasses = this.buildChoiceClasses();
      }
      immediate: true;
    },
  },
  methods: {
    buildChoiceClasses() {
      return [
        `question-choice`,
        `question-choice-${_.lowerCase(
          this.question.options.layout || SurveyLayout.HORIZONTAL
        )}`,
      ];
    },
  },
  computed: {
    haveSubMaxScore() {
      return !!((this.question as any).options?.scoringEnabled ?? false);
    },
    choiceMaxScore() {
      return _.max(
        (this.question.choices as any[]).map((choice) =>
          parseFloat(choice?.options?.score || 0)
        )
      );
    },
    mainMaxScore() {
      const scoreMax = (this.question as any).options?.scoreMax ?? null;
      return scoreMax != null
        ? scoreMax
        : (this.question as any).options?.score || 0;
    },
  },
});
</script>

<style lang="less" scoped>
.require-label {
  color: #ed4014;
}

.main-score-hint {
  margin-bottom: 8px;

  .max-score-label {
    font-size: 13px;
    color: #70748c;
  }
}
</style>
