<template>
  <RadioGroup :vertical="vertical">
    <Row type="flex" justify="start" :gutter="50">
      <Col
        v-for="choice in question.choices"
        :key="choice.id"
        :class="choiceClasses"
      >
        <Radio
          :label="choice.id"
          @click.native="toggleAnswer(choice.id)"
          :disabled="question.options.readonly"
        >
          <span v-if="haveStar(choice)">
            <Icon type="md-star" color="orange" :size="16" />
          </span>
          <span class="choice-title">{{ choice.text | translate(true) }}</span>
          <span class="choice-score mr-small" v-if="haveMaxScore">{{
            `(${choice.options.score || 0} ${t(
              "survey_creator.question.scores",
              $rootComponent.currentLanguage
            )})`
          }}</span>
          <div
            class="mr-small"
            v-show="
              choice.options.inputEnabled && question.options.inputtedEnabled
            "
          >
            <Input />
          </div>
          <span class="jump-desc">{{ getJumpDesc(choice.id) }}</span>
        </Radio>
      </Col>
    </Row>
  </RadioGroup>
</template>

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

export default Vue.extend({
  name: "single-selection",
  components: { Row, Col, Radio, RadioGroup, Icon, Input },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  data() {
    return {
      // @ts-ignore
      choiceClasses: this.buildChoiceClasses(),
    };
  },
  computed: {
    haveMaxScore() {
      // @ts-ignore
      return _.get(this.question, "options.scoringEnabled", false);
    },
    jumps() {
      // @ts-ignore
      return _.get(this.question, "jumps", []);
    },
  },
  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
        )}`,
      ];
    },
    haveStar(choice) {
      return choice.options?.star ?? false;
    },
    getJumpDesc(choiceId) {
      let jump = _.find(this.jumps, (jump) => jump.choiceId === choiceId);
      if (_.isEmpty(jump)) {
        return null;
      }
      let jumpQuestion = _.find(
        this.survey.questions,
        // @ts-ignore
        (question) => question.id === jump.toQuestionId
      );
      return this.t(`survey_creator.question.jump.selected_jump`, [
        // @ts-ignore
        jumpQuestion.header.number,
      ]);
    },
  },
});
</script>
<style lang="less" scoped>
.ivu-row-flex-start {
  align-items: center;
}
.ivu-radio-group-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.choice-title {
  margin-left: 8px;
  margin-right: 8px;
}

.mr-small {
  margin-right: 8px;
}
</style>
