<template>
  <Drawer
    v-model="visibleDrawer"
    :styles="styles"
    :width="50"
    :closable="true"
    :mask-closable="false"
  >
    <ButtonGroup slot="header" shape="circle">
      <Button type="primary" v-once>{{
        t(`survey_creator.question.type`)
      }}</Button>
      <Button>{{ t(`survey_creator.question.types.${questionType}`) }}</Button>
    </ButtonGroup>
    <component
      class="question-form"
      v-if="visibleDrawer && question"
      ref="questionComponent"
      :is="questionType"
      :question="question"
    ></component>
    <div class="drawer-footer">
      <Button type="primary" @click="saveQuestion">
        <span v-if="isCopy">{{ t("survey_creator.common.copy") }}</span>
        <span v-else>{{ t("survey_creator.common.save") }}</span>
      </Button>
      <Button @click="cancel">{{ t("survey_creator.common.cancel") }}</Button>
    </div>
  </Drawer>
</template>

<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import { Button, ButtonGroup, Drawer, Card } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import { BaseQuestionModel, QuestionType } from "@wg-npm/survey-core";
import SingleSelectionForm from "./forms/single-selection-form.vue";
import MultiSelectionForm from "./forms/multi-selection-form.vue";
import ShortAnswerForm from "./forms/short-answer-form.vue";
import MatrixForm from "./forms/matrix-form.vue";
import SCORING from "./forms/scoring-form.vue";
import TitleForm from "./forms/title-form.vue";
import EvaluationForm from "./forms/evaluation-form.vue";

const QUESTION_OPERATION_TYPE_COPY = "copy";
export default Vue.extend({
  name: "question-edit-drawer",
  components: {
    Drawer,
    ButtonGroup,
    Button,
    Card,
    [QuestionType.SINGLE_SELECTION]: SingleSelectionForm,
    [QuestionType.MULTI_SELECTION]: MultiSelectionForm,
    [QuestionType.SHORT_ANSWER]: ShortAnswerForm,
    [QuestionType.FILL_BLANK]: ShortAnswerForm,
    [QuestionType.MATRIX]: MatrixForm,
    [QuestionType.SCORING]: SCORING,
    [QuestionType.TEXT_TITLE]: TitleForm,
    [QuestionType.EVALUATION]: EvaluationForm,
  },
  inject: ["$rootComponent"],
  mixins: [LocaleMixin],
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    question: {
      type: Object as () => BaseQuestionModel,
      required: false,
    },
    operationType: {
      type: String,
      default: "edit",
    },
  },
  model: {
    prop: "visible",
    event: "input",
  },
  watch: {
    visible(val) {
      this.visibleDrawer = val;
    },
    visibleDrawer(val) {
      this.$emit("input", val);
      if (val) {
        this.$emit("on-open", val);
      } else {
        this.$emit("on-close", val);
      }
    },
  },
  data() {
    return {
      visibleDrawer: this.visible,
      styles: {
        height: "calc(100% - 85px)",
        overflow: "auto",
        position: "static",
      },
    };
  },
  computed: {
    isCopy() {
      return this.operationType == QUESTION_OPERATION_TYPE_COPY;
    },
    questionType() {
      // @ts-ignore
      return _.get(this.question, "type");
    },
  },
  methods: {
    closeDrawer() {
      this.visibleDrawer = false;
    },
    saveQuestion() {
      const self = this;
      const questionComponent = this.$refs.questionComponent;
      questionComponent.$refs["questionForm"].validate((valid) => {
        if (valid) {
          self.$rootComponent.onQuestionCreateOrUpdate(
            questionComponent.editQuestion,
            this.operationType
          );
          self.closeDrawer();
        }
      });
    },
    cancel() {
      this.closeDrawer();
    },
  },
});
</script>
<style type="less">
.drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
  z-index: 99;
}
.question-form {
  margin-bottom: 53px;
}
</style>
