<template>
  <div
    class="container-fluid"
    :style="{
      height: $attrs.height,
    }"
  >
    <!-- <template
      v-for="(schemaItem, i) in myActiveSchema?.form"
      v-if="Array.isArray(schemaItem)"
    >
      <FormBuilder
        :key="i + schemaItem.key + showFormBuilder"
        :formElements="schemaItem"
        :formData="formDataInit"
        :displayMode="'default'"
        @saveComponentValue="changedFormValues"
        @keydown="keydown"
        class="row"
      ></FormBuilder>
    </template> -->
    <div class="row" style="height: 90%; overflow: auto">
      <div class="col-12">
        <FormBuilder
          v-if="showFormBuilder"
          :formElements="myActiveSchema.form.items_main"
          :formData="formDataInit"
          :readOnly="readOnlyHandler()"
          :displayMode="'default'"
          @saveComponentValue="changedFormValues"
          class="row"
        ></FormBuilder>
      </div>

      <div class="col-12 mt-2" v-show="showMore">
        <FormBuilder
          v-if="showFormBuilder"
          :formElements="myActiveSchema.form.items_more"
          :formData="formDataInit"
          :displayMode="'default'"
          :readOnly="readOnlyHandler()"
          @saveComponentValue="changedFormValues"
          class="row"
        ></FormBuilder>
      </div>
      <div class="col-12 d-flex justify-content-start align-items-start mb-2">
        <ToggleButton
          openText="بیشتر"
          openIcon="Component-25--1"
          closeText="بستن"
          closeIcon="Component-22--1"
          @toggle="clickToggleButton"
        >
        </ToggleButton>
      </div>
    </div>

    <div class="row px-3 border-top h-auto" style="height: 3em">
      <div class="col-12 d-flex justify-content-end align-items-end">
        <button
          title="ذخیره"
          classes="btn btn-outline-primary fz-13"
          @click="saveFish(valueModal.action)"
          buttonText="ذخیره"
          class="btn btn-outline-primary fz-13 mt-2"
          :class="{ disabled: valueModal?.isReadonly == true }"
        >
          ذخیره
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import entityApi from "~/apis/entityApi.js";
import { mapState } from "pinia";
import { cloneDeep } from "lodash";
import { useCommonStore } from "~/stores/commonStore";
import { useEntityStore } from "@search/stores/entityStore";
/**
 * @vue-prop {Object}  [valueModal={}] - یک آبجکت از مقادیر مورد نیاز برای فیش
 * @vue-data {undefined} [cloneActiveSchemaGetter=undefined] - یک کپی از ساختار صفحه
 * @vue-data {Boolean} [ShowMore=false] - وضعیت نمایش  موارد بیشتر  .
 * @vue-data {Object} [formDataInit={}] - آبجکتی که شامل مقادیر ورودی ثابت برای فرم بیلدر است
 * @vue-data {Object} [formDataValues={}] - مقادیر بازگشتی از فرم بیلدر که خود فرد پر کرده است
 * @vue-data {String} [date_create=""] - تاریخ ایجاد فیش
 * @vue-data {String} [username=""] - نام فردی که فیش را ایجاد کرده است
 * @vue-data {String} [address=""] - آدرس ایجاد فیش
 * @vue-data {Number} [showFormBuilder=false] - برای دوباره ساختن فرم بیلدر
 * @vue-event {String} saveFish - این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
 * @vue-computed {Object} mapState.selectedItemEntityGetter - مقدار موجودیتی که کاربر انتخاب کرده است را بازمی‌گرداند.
 * @vue-computed {Object} mapState.activeEntityViewSchemaGetter - ساختار انتخاب شده برای صفحه.
 * @vue-computed {String} repoUrl - ساختار انتخاب شده برای صفحه.
 * @vue-computed {Object} myActiveSchema - ساختار انتخاب شده برای صفحه.
 * @vue-event {String} saveFish - این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
 */

export default {
  props: {
    valueModal: {
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.entity = this.selectedItemEntityGetter;
    this.cloneActiveSchemaGetter = cloneDeep(this.activeEntityViewSchemaGetter);

    if (this.valueModal.action == "edit") {
      this.itemForEdit = this.valueModal.itemEdit._source;

      // filter null/null values
      Object.keys(this.itemForEdit).forEach((key) => {
        if (this.itemForEdit[key] == null) return;
        this.formDataInit[key] = this.itemForEdit[key];
      });

      this.activeTab = 3;
    } else {
      this.date_create = this.todays();
      // this.address = this.referenceText(
      //   this.cloneActiveSchemaGetter.contextMenu[0].form.from_footer[0]
      // );
      let list = this.myActiveSchema.form.items_more;
      list.forEach((item) => {
        if (item.key == "address") {
          this.address = this.referenceText(item);
        }
      });
      this.username = userFullname(this.currentUser?.user_data);

      let title = this.valueModal?.selectedText;
      let words = this.valueModal?.selectedText.split(" ");
      if (words.length > 10) title = words.slice(0, 10).join(" ");

      this.formDataInit = {
        address: this.address,
        date_create: this.date_create,
        text_main: this.valueModal?.selectedText,
        title: title,
        username: this.username,
      };
    }
    this.showFormBuilder = true;
  },
  data() {
    return {
      entity: {},
      showMore: false,
      cloneActiveSchemaGetter: undefined,
      formDataInit: {},
      formDataValues: {},
      date_create: "",
      address: "",
      username: "",
      showFormBuilder: false,
      // selectedNavigation: "",
    };
  },
  computed: {
    ...mapState(useEntityStore, [
      "activeEntityViewSchemaGetter",
      "selectedItemEntityGetter",
    ]),
    ...mapState(useCommonStore, ["userPermisionGetter", "currentUser"]),
    myActiveSchema() {
      return this.activeEntityViewSchemaGetter?.contextMenu.find(
        (item) => item.key == "term"
      );
    },
  },
  methods: {
    //برسی میکنه که آیا اجازه ویرایش فیش بدهد یا نه
    readOnlyHandler() {
      let Schema = this.valueModal.itemSchema;
      let OwnerResearch = this.valueModal.itemEdit?._source.user.user_id;
      if (this.valueModal.isReadonly == true) return true;
      if (!this.valueModal.itemEdit) return false;

      let isUserAccess = this.isEditable(Schema.key);

      let isOwnerResearch = "";
      if (this.currentUser.user_id == OwnerResearch) isOwnerResearch = true;
      else isOwnerResearch = false;

      if (isUserAccess == true || isOwnerResearch == true) return false;
      else return true;
    },
    isEditable(key) {
      if (key) {
        let res = this.hasPermission(key + "_edit");
        return res;
      }
      return true;
    },

    hasPermission(permission) {
      if (this.currentUser?.user_level > 1) return true;

      if (this.userPermisionGetter && this.userPermisionGetter?.length)
        return this.userPermisionGetter?.includes(permission);
      return false;
    },
    /**
     * تغییر وضعیت نمایش بیشتر با توجه به ایونت دریافتی.
     * @param {Boolean} event - وضعیت جدید برای نمایش بیشتر.
     * @description این متد وضعیت نمایش بیشتر را بر اساس ایونت دریافتی تغییر می‌دهد.
     * این متد معمولاً به عنوان یک هندلر برای ایونت‌های toggle استفاده می‌شود.
     */
    clickToggleButton(event) {
      this.showMore = event;
    },
    /**
     * دریافت تاریخ امروز به شکل رشته متنی.
     * @returns {String} تاریخ امروز به فرمت YYYY/MM/DD
     * @description این متد برای دریافت تاریخ امروز به فرمت مشخص شده استفاده می‌شود.
     */
    todays() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1;
      const day = today.getDate();
      this.currentDate = `${year}/${month}/${day}`;

      return this.datefa(this.currentDate);
    },
    /**
     * تبدیل تاریخ میلادی به تاریخ فارسی.
     * @param {String} date تاریخ میلادی
     * @returns {String} تاریخ فارسی
     * @description این متد برای تبدیل تاریخ میلادی به تاریخ فارسی استفاده می‌شود.
     */
    datefa(item) {
      var m = item;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },
    /**
     * دریافت متن مرجع.
     * @param {Object} fieldFooter متغیر حاوی اطلاعات مرجع
     * @returns {String} متن مرجع
     * @description این متد برای دریافت متن مرجع استفاده می‌شود.
     */
    referenceText(fieldFooter) {
      if (!fieldFooter.reference) return;
      const regex = /(\{(\w+)\})/gm;
      const str = fieldFooter.reference;
      let m;
      let matches = [];

      while ((m = regex.exec(str)) !== null) {
        if (m.index === regex.lastIndex) {
          regex.lastIndex++;
        }
        matches.push(m);
      }

      let reference = str;

      matches.forEach((match, groupIndex) => {
        let group = match[0];
        let key = group.replace("{", "").replace("}", "");
        reference = reference.replaceAll(group, this.entity[key]);
      });
      this.addressFish = reference;
      return reference;
    },
    /**
     * تغییرات اعمال شده در فرم را ذخیره کنید.
     * @param {Object} form فرم با تغییرات جدید
     * @description این متد برای ذخیره تغییراتی که در فرم اعمال شده‌اند استفاده می‌شود.
     */
    changedFormValues(data) {
      this.formDataValues = data;
    },
    keydown(item) {},
    /**
     * ذخیره فیش.
     * @param {String} editState وضعیت ویرایش یا اضافه کردن
     * @description این متد برای ذخیره فیش جدید یا ویرایش شده استفاده می‌شود.
     */
    async saveFish() {
      let formDataValues = { ...this.formDataInit, ...this.formDataValues };
      let url = "";

      url += entityApi.fish.addTerm;
      let key = "";
      if (this.$route.params?.key) key = this.$route.params.key;

      url = url.replace("{{index_key}}", key);
      if (formDataValues.term_project)
        url = url.replace("{{project_id}}", formDataValues.term_project);
      else url = url.replace("{{project_id}}", "5"); // موقت بخاطر باگ خاص در اصطلاحات آقای مهدی زاده فعلا

      const formData = {
        research_key: this.valueModal.itemSchema.key,
        title: formDataValues.title,
        text_main: formDataValues.text_main,
        address: formDataValues.address,
        research_type: this.myActiveSchema?.form.title,
        service: "repo",
        ref_key: key,
        ref_id: this.entity._id,
        text_position: "parag1:10, index1:0, parag2:12, index2:23",
      };

      try {
        const { $api } = useNuxtApp();
        const res = await $api(url, {
          method: "POST",
          baseURL: repoUrl(),
          body: formData,
        });
        this.mySwalToast({
          html: res.message,
        });
        this.$emit("closeAfterSaving");
      } catch (err) {
        this.fetchingData = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
