<template>
  <div class="survey-preview-wrapper" v-if="currentSurvey">
    <Row type="flex" justify="space-between" align="middle">
      <Col>
        <Button v-if="options.back" icon="ios-arrow-back" @click="onBack">
          {{ t("survey_creator.common.back") }}
        </Button>
      </Col>
      <Col>
        <toolbar
          :survey="currentSurvey"
          :create-question="false"
          :preview="false"
          :change-language="options.changeLanguage"
        ></toolbar>
      </Col>
    </Row>
    <div class="survey-editor-wrapper">
      <survey-internal-previewer
        :survey="currentSurvey"
        :init-question-ids="initQuestionIds"
        @selected-question-ids="selectedQuestionIds"
        :survey-custom-questions="currentSurveyCustom.questions"
      ></survey-internal-previewer>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Button, Card, Col, Row } from "view-design";
import Toolbar from "./toolbar/toolbar.vue";
import SurveyInternalPreviewer from "./previewer/survey-internal-previewer.vue";
import LocaleMixin from "../mixins/locale-mixin";
import {
  SurveyModel,
  formatTitle,
  CUSTOM_INPUT_REG,
} from "@wg-npm/survey-core";
import { SurveyPreviewerOptions } from "../../types/survey-previewer";

export default Vue.extend({
  name: "survey-previewer",
  mixins: [LocaleMixin],
  components: { Card, Row, Col, Button, Toolbar, SurveyInternalPreviewer },
  provide() {
    return {
      $rootComponent: this,
    };
  },
  props: {
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
    options: {
      type: Object as () => SurveyPreviewerOptions,
      required: true,
    },
    initQuestionIds: {
      type: Array,
      required: false,
    },
    surveyCustom: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      currentSurvey: this.survey,
      currentLanguage:
        Vue.$surveyLanguage || this.survey.options.primaryLanguage,
      currentSurveyCustom: this.surveyCustom,
    };
  },
  created() {
    this.setSurveyLanguage(this.survey);
    this.prepareSurveyCustomQuestions();
  },
  methods: {
    onBack() {
      this.$emit("on-back");
    },
    onChangeLanguage(language) {
      this.currentSurvey = _.cloneDeep(this.survey);
      Vue.$surveyLanguage = language;
      this.currentLanguage = language;
    },
    selectedQuestionIds(questionIds) {
      this.$emit("selected-question-ids", questionIds);
    },
    prepareSurveyCustomQuestions() {
      if (_.isEmpty(this.currentSurveyCustom)) {
        this.currentSurveyCustom = {
          surveyId: this.survey.id,
          questions: [],
        };
      }
      if (_.isEmpty(this.currentSurveyCustom?.questions)) {
        // @ts-ignore
        _.set(this.currentSurveyCustom, "questions", []);
        _.each(this.survey.questions, (q) => {
          let input_titles: any = [];
          let formatTitleStr = formatTitle(q, Vue.$surveyLanguage);
          _.each(formatTitleStr, (t, index) => {
            if (CUSTOM_INPUT_REG.test(t)) {
              let title = {
                title: "",
                index: index,
              };

              input_titles.push(title);
            }
          });

          let customQuestion = {
            id: q.id,
            surveyId: this.survey.id,
            filledTitle: input_titles,
          };
          this.currentSurveyCustom.questions.push(customQuestion);
        });
      }
    },
  },
});
</script>
