<template>
  <CheckboxGroup v-model="value.answer" @on-change="selChange">
    <Row type="flex" justify="start" :gutter="50">
      <Col
        v-for="choice in question.choices"
        :key="choice.id"
        :class="choiceClasses"
      >
        <Checkbox
          :label="choice.id"
          :disabled="question.options.readonly || choice.readonly"
        >
          <span class="choice-title">{{ choice.text | translate(true) }}</span>
          <span v-if="haveMaxScore" class="choice-score">{{
            `(${choice.options.score || 0} ${t(
              "survey_creator.question.scores",
              $rootComponent.currentLanguage
            )})`
          }}</span>
          <div
            v-show="
              choice.options.inputEnabled && question.options.inputtedEnabled
            "
          >
            <Input />
          </div>
        </Checkbox>
      </Col>
    </Row>
  </CheckboxGroup>
</template>

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

export default Vue.extend({
  name: "multi-selection",
  components: { Row, Col, Checkbox, CheckboxGroup, Input },
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  props: {
    question: {
      type: Object as () => BaseQuestionModel,
      required: true,
    },
  },
  data() {
    return {
      // @ts-ignore
      choiceClasses: this.buildChoiceClasses(),
      value: { answer: [] },
    };
  },
  computed: {
    haveMaxScore() {
      // @ts-ignore
      return _.get(this.question, "options.scoringEnabled", false);
    },
  },
  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
        )}`,
      ];
    },
    setCheckboxStatus() {
      let exclusiveChoiceId = "";
      const notExclusiveChoices = new Array();
      // @ts-ignore
      _.each(this.question.choices, (choice) => {
        if (choice.options.exclusiveEnabled) {
          exclusiveChoiceId = choice.id;
        } else {
          notExclusiveChoices.push(choice);
        }
      });

      // @ts-ignore
      _.each(notExclusiveChoices, (choice) => {
        // @ts-ignore
        if (_.includes(this.value.answer, exclusiveChoiceId)) {
          choice.readonly = true;
        } else {
          choice.readonly = false;
        }
      });
    },
    selChange(val) {
      // @ts-ignore
      _.each(this.question.choices, (choice) => {
        // @ts-ignore
        _.each(val, (id) => {
          if (choice.id == id) {
            if (choice.options.exclusiveEnabled) {
              this.value.answer = [id];
            }
          }
        });
      });
      this.setCheckboxStatus();
    },
  },
});
</script>
<style lang="less" scoped>
.ivu-row-flex-start {
  align-items: center;
}
.ivu-checkbox-group-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

.choice-score {
  margin-right: 8px;
}
</style>
