import { mapState, mapActions } from "pinia";

export default {
  data() {
    return {
      parentEl: undefined,
      paragraphId: undefined,
      paragraphParentId: undefined,
      globalGuid: undefined,
      clientX: undefined,
      clientY: undefined,
      selectedText: undefined,
      fishActions: undefined,
      isShowHilight: true,
      valueResearchModal: {},
    };
  },
  computed: {
    ...mapState(useEntityStore, [
      "activeEntityViewSchemaGetter",
      "listHighlightTextGetter",
    ]),
  },
  methods: {
    // #region mehdi all
    ...mapActions(useEntityStore, [
      "selectedTextSetter",
      "fishActionsSetter",
      "listHighlightTextSetter",
      "toggleShowHighlightSetter",
    ]),
    ...mapActions(useCommonStore, ["isShowHilightSetter"]),
    onMouseUp($event) {
      this.clientX = $event.clientX;
      this.clientY = $event.clientY;
      this.textEvent = $event;
      // Get selected text and encode it
      const selection = encodeURIComponent(
        this.getSelected().toString()
      ).replace(/[!'()*]/g);
      const encodedString = selection;
      if (encodedString == "") {
        this.selectedText = this.getSelectionParentElement()?.innerText;
        this.selectedTextSetter(this.selectedText);
      } else {
        this.selectedText = decodeURIComponent(encodedString);
        this.selectedTextSetter(this.selectedText);
      }
    },
    getSelected() {
      if (window.getSelection) {
        return window.getSelection();
      } else if (document.getSelection) {
        return document.getSelection();
      } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
          return selection.text;
        }
        return false;
      }
    },
    getSelectionParentElement() {
      var parentEl = null,
        sel;
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
          parentEl = sel.getRangeAt(0).commonAncestorContainer;
          if (parentEl.nodeType != 1) {
            parentEl = parentEl.parentNode;
          }
        }
      } else if ((sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
      }
      return parentEl;
    },
    linksHandler(event) {
      if (!this.$el || isMajlesBuild()) return;
      // let's handler all contextmenu event on all archor tags
      let links = this.$el.querySelectorAll(".text-main-paragraf");

      const vm = this;

      links.forEach((element) => {
        element.addEventListener(
          "contextmenu",
          (event) => {
            const ctxMenuData = this.getContextMenu(vm, element);

            vm.$root.$emit("contextmenu", { event, ctxMenuData });
          },
          false
        );
      });
    },
    getContextMenu(vm, element) {
      let res = [];
      this.activeEntityViewSchemaGetter?.contextMenu.forEach((item) => {
        item.handler = vm.contextMenuHandler.bind(vm, item, element);
        res.push(item);
      });

      return res;
    },
    newGuid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },

    contextMenuHandler(item, target) {
      if (item?.key == "fish") this.takingNotHyperLink(target, item);
      else if (item?.key == "note") this.textAnnotation(target, item);
      else if (item?.key == "link") this.linkingHyper(target, item);
      else if (item?.key == "similar")
        this.vectorMatching(); // مشابهت یابی معنایی
      else if (item?.key == "similar-text")
        this.textualMatching(); // مشابهت یابی لفظی
      else if (item?.key == "term") this.termSimilar(target, item);
      else if (item?.key == "hilight") this.hilightText(target, item);
    },
    // #endregion
    // #region mehdi فیش برداری
    takingNotHyperLink(target, itemSchema) {
      this.$emit("fishHandler", {
        selectedText: this.selectedText,
        action: "add",
        itemSchema: itemSchema,
      });
    },
    // createPopupReceipt() {
    //   setTimeout(() => {
    //     this.$refs.linkReceipt.$el.style.opacity = 1;
    //     this.$refs.linkReceipt.$el.style.display = "block";
    //   }, 700);
    // },
    // closePopupReceipt() {
    //   this.newFish = false;
    //   this.$refs.linkReceipt.$el.style.opacity = 0;
    //   this.$refs.linkReceipt.$el.style.display = "none";
    // },
    // #endregion
    // #region mehdi  حاشیه نویسی
    textAnnotation(target, itemSchema) {
      // this.newAnnotation = true;
      // this.createPopupAnnotation();
      // this.annotationActionsSetter("Record");
      this.$emit("annotationHandler", {
        selectedText: this.selectedText,
        action: "add",
        itemSchema: itemSchema,
      });
    },
    // createPopupAnnotation() {
    //   setTimeout(() => {
    //     this.$refs.linkAnnotation.$el.style.opacity = 1;
    //     this.$refs.linkAnnotation.$el.style.display = "block";
    //   }, 700);
    // },
    // closePopupAnnotation() {
    //   this.newAnnotation = false;
    //   this.$refs.linkAnnotation.$el.style.opacity = 0;
    //   this.$refs.linkAnnotation.$el.style.display = "none";
    // },
    // #endregion
    // #region mehdi  مشابه یابی

    textSimilar() {
      this.similarInfoSetter({
        type: "vector",
        show: true,
        text: this.selectedText,
        id: this.sectionitem._id,
        label: "مشابهت یابی معنایی",
      });
    },

    // #endregion
    // #region mehdi "لینک زنی"
    linkingHyper(target) {
      this.newLink = true;
      this.createPopup();
    },
    deleteHyperLink(target) {
      const problemSection = target.parentElement;
      problemSection.innerHTML = problemSection.innerHTML.replace(
        target.outerHTML,
        target.innerHTML
      );
      this.parentEl = problemSection;
    },
    createPopup() {
      const posX = this.clientX;
      const posY = this.clientY;

      setTimeout(() => {
        this.$refs.linkPopup.$el.style.top = posY + "px";
        this.$refs.linkPopup.$el.style.left = posX + "px";
        this.$refs.linkPopup.$el.style.opacity = 1;
      }, 700);
    },
    saveLink(linkText = null) {
      const text = decodeURIComponent(this.selectedText);
      this.globalGuid = this.newGuid();
      const replacementTag = `<a id="${this.globalGuid}" name="${this.globalGuid}" href="${linkText}" title="${linkText}" target="_blank" class="c-link tlink">${text}</a>`;
      const refContent = this.parentEl;
      refContent.innerHTML = refContent.innerHTML.replace(text, replacementTag);
      const sectionContent = refContent.innerHTML;
      this.linksHandlerForLinkingHyper();
      return sectionContent;
    },
    closeCommentForm() {
      this.newLink = false;
    },
    linksHandlerForLinkingHyper() {
      if (!this.$el) return;

      let links = this.$el.querySelectorAll(".text-main-paragraf a");
      const vm = this;

      links.forEach((element) => {
        element.addEventListener(
          "contextmenu",
          (event) => {
            const ctxMenuData = [
              {
                title: this.$t("Delete"),
                icon: "Component-295--1",
                handler: vm.deleteHyperLink.bind(vm, element),
              },
            ];
            vm.$root.$emit("contextmenu", { event, ctxMenuData });
          },
          false
        );
      });
    },
    // #endregion
    // #region mehdi " اصطلاحات"

    textCorrectionHyper(target) {},

    termSimilar(target, itemSchema) {
      this.$emit("termHandler", {
        show: true,
        selectedText: this.selectedText,
        modal: "term",
        action: "add",
        itemSchema: itemSchema,
      });
    },
    // #endregion
    // #region mehdi " hilight"

    replaSpan(text, color) {
      let item = `<span style="background-color:${color};" class="c-link tlink"> ${text} </span>`;
      return item;
    },

    hilightText(target) {
      // this.$emit("hilightTextHandler", {
      //   selectedText: this.selectedText,
      //   target: target,
      // });
      // this.openModal("ComponentHilightText", " نشانه گذاری متن");
      this.openBaseModal("ComponentHilightText", " نشانه گذاری متن");
      this.valueResearchModal = {
        selectedText: this.selectedText,
        target: target,
      };
    },
    showHilightText(event) {
      this.listHighlightTextGetter.forEach((element) => {
        if (element.text !== event.text) return;
        let text = decodeURIComponent(element.text);
        let color = element?.color;
        if (element.show == false) color = "transparent";
        let replacementTag = this.replaSpan(text, color);

        // Escape special characters for regex
        const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
        let regex = new RegExp(`(${escapedText})`, "gi");

        let content = this.textMain;
        let highlightedContent = content.replace(regex, replacementTag);
        this.textMain = highlightedContent;
      });
      this.isShowHilightSetter(true);
    },
    showHilightTextTheFirstTime() {
      this.listHighlightTextGetter.forEach((element) => {
        let text = decodeURIComponent(element.text);
        let color = element?.color;
        if (element.show == false) color = "transparent";
        let replacementTag = this.replaSpan(text, color);

        // Escape special characters for regex
        const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
        let regex = new RegExp(`(${escapedText})`, "gi");

        let content = this.textMain;
        let highlightedContent = content.replace(regex, replacementTag);
        this.textMain = highlightedContent;
      });
      // this.isShowHilightSetter(true);
    },
    deleteItem(event) {
      const text = decodeURIComponent(event.text);
      let color = event?.color;
      if (event.show == false) color = "transparent";

      // Escape special characters for regex
      const escapedText = this.replaSpan(text, color).replace(
        /[.*+?^${}()|[\]\\]/g,
        "\\$&"
      );
      const regex = new RegExp(escapedText, "gi");

      const content = this.textMain;
      const highlightedContent = content.replace(regex, text);
      this.textMain = highlightedContent;
    },
    toggleHandlerShowHilightText(isShowHilight) {
      let replacementTagOld = "";
      let replacementTagNew = "";

      this.listHighlightTextGetter.forEach((element) => {
        const text = element?.text;
        let color = element?.color;

        if (isShowHilight) {
          replacementTagOld = this.replaSpan(text, "transparent");
          replacementTagNew = this.replaSpan(text, color);
        } else {
          replacementTagOld = this.replaSpan(text, color);
          replacementTagNew = this.replaSpan(text, "transparent");
        }

        // Escape special characters for regex
        const escapedReplacementTagOld = replacementTagOld.replace(
          /[.*+?^${}()|[\]\\]/g,
          "\\$&"
        );
        const regex = new RegExp(`(${escapedReplacementTagOld})`, "gi");

        let content = this.textMain;
        let highlightedContent = content.replace(regex, replacementTagNew);
        this.textMain = highlightedContent;
      });
    },
    // #endregion
  },
};