<template>
  <Select
    v-model="scope"
    :placeholder="
      t('survey_creator.question.evaluation.condition.question_scope')
    "
    multiple
    :max-tag-count="0"
    :max-tag-placeholder="numbers"
    @on-change="onChange"
  >
    <template v-for="question in questions">
      <Option
        v-if="question.type == 'SINGLE_SELECTION'"
        :value="question.id"
        :key="question.id"
        :tag="question.header.number"
      >
        <Tooltip
          :transfer="true"
          :content="getSingleOptionContent(question)"
          max-width="500"
          placement="top-start"
        >
          {{ question.header.number }}
          {{ question.header.text[primaryLanguage] | title }}
        </Tooltip>
      </Option>
      <template v-if="question.type == 'MATRIX'">
        <Option
          v-for="subQuestion in question.subQuestions"
          :value="subQuestion.id"
          :key="subQuestion.id"
          :tag="question.header.number + '.' + subQuestion.number"
        >
          <Tooltip
            :transfer="true"
            :content="getMatrixOptionContent(question, subQuestion)"
            max-width="500"
            placement="top-start"
          >
            {{ question.header.number }}.{{ subQuestion.number }}
            {{ subQuestion.text[primaryLanguage] | title }}
          </Tooltip>
        </Option>
      </template>
    </template>
  </Select>
</template>

<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Select, Option, Tooltip } from "view-design";
import QuestionFormMixin from "../../../../../mixins/question-form-mixin";
import { ExprEvaluationQuestion } from "@wg-npm/survey-core/src/expr-evaluation-question";

export default Vue.extend({
  name: "question-select",
  components: { Select, Option, Tooltip },
  mixins: [QuestionFormMixin],
  props: {
    value: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      scope: this.value,
    };
  },
  computed: {
    questions() {
      return _.clone(this.$rootComponent.currentSurvey.questions);
    },
  },
  filters: {
    title(obj: string, length: number = 10) {
      if (obj && obj.length > length) {
        return `${obj.substring(0, length)}...`;
      }
      return obj;
    },
  },
  methods: {
    onChange(val) {
      this.$emit("input", val);
    },
    numbers(num) {
      let numbers = new ExprEvaluationQuestion(
        this.questions,
        this.scope
      ).calculateNumbers();
      return _.join(
        _.map(numbers, (number) => {
          if (_.isArray(_.head(number))) {
            return _.join(
              _.map(number, (e) => _.join(e, "-")),
              ","
            );
          }
          return _.join(number, "-");
        }),
        ","
      );
    },
    getSingleOptionContent(question) {
      return (
        question.header.number +
        " " +
        question.header.text[this.primaryLanguage]
      );
    },
    getMatrixOptionContent(question, subQuestion) {
      return (
        question.header.number +
        "." +
        subQuestion.number +
        " " +
        subQuestion.text[this.primaryLanguage]
      );
    },
  },
});
</script>
