<template>
  <div>
    <translation-table
      :columns="columns"
      :languages="languages"
      :primary-language="primaryLanguage"
      v-if="languages.length > 0"
      v-model="data"
    />
    <div class="fill-width no-data" v-else>
      <Row>
        <img class="empty_box-copy" src="../../images/empty-box-copy.svg" />
      </Row>
      <Row>
        <span class="no-data-span">{{
          t("survey_creator.message.noSettingLocale")
        }}</span>
      </Row>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { SurveyModel } from "@wg-npm/survey-core";
import LocaleMixin from "../../mixins/locale-mixin";
import SurveyTranslatorMixin from "../../mixins/survey-translator-mixin";
import TranslationTable from "./translation-table.vue";

export default Vue.extend({
  name: "survey-translator",
  components: { TranslationTable },
  mixins: [LocaleMixin, SurveyTranslatorMixin],
  props: {
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
  },
  data() {
    return {
      primaryLanguage: null,
      languages: [],
      data: [],
      columns: [],
    };
  },
  created() {
    this.primaryLanguage = this.getPrimaryLanguage(this.survey);
    this.languages = this.getLanguagesExcludedPrimaryLanguage(this.survey);
    this.buildData();
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.merge(newValue);
      },
      deep: true,
    },
  },
  methods: {
    buildData() {
      let oldSurvey = _.cloneDeep(this.survey);
      _.forEach(oldSurvey.questions, (question) => {
        let item = question.header;
        item["tempId"] = this.buildQuestionId(question);
        item["type"] = question.type;
        item["children"] = [];
        item["_showChildren"] = true;

        _.forEach(question.choices, (choice) => {
          item.children.push(choice);
          choice["tempId"] = this.buildChoiceId(question, choice);
          item.children["type"] = "";
        });

        if (question.subQuestions) {
          _.forEach(question.subQuestions, (subQuestion) => {
            subQuestion["type"] = this.SUB_QUESTION_TYPE;
            subQuestion["tempId"] = this.buildSubQuestionId(
              question,
              subQuestion
            );
            item.children.push(subQuestion);
          });
        }

        this.data.push(item);
      });
    },
    merge(newData) {
      let map = this.buildDataMap(newData);
      _.forEach(this.survey.questions, (question) => {
        question.header.text = map[this.buildQuestionId(question)].text;

        _.forEach(question.choices, (choice) => {
          choice.text = map[this.buildChoiceId(question, choice)].text;
        });

        if (question.subQuestions) {
          _.forEach(question.subQuestions, (subQuestion) => {
            subQuestion.text =
              map[this.buildSubQuestionId(question, subQuestion)].text;
          });
        }
      });
      console.log(this.survey);
    },
  },
});
</script>
<style lang="less" scoped>
.fill-width {
  width: 100%;
  text-align: center;
}

.no-data {
  .no-data-span {
    font-size: 24px;
  }

  .prompt-text {
    font-size: 16px;
  }
}

.mt {
  margin-top: 16px;
}
</style>
