import { defineComponent as V, inject as _, useId as R, ref as h, computed as j, onMounted as z, watch as P, onUnmounted as U, createElementBlock as D, openBlock as v, createElementVNode as M, normalizeClass as b, unref as a, createBlock as w, createVNode as F, Teleport as G, createCommentVNode as H, nextTick as A } from "vue";
import J from "../ContextMenu/ContextMenu.vue.js";
import "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import { useTheme as K } from "../../../hooks/useTheme.js";
/* empty css                              */
/* empty css                                              */
import "../../../node_modules/linkifyjs/dist/linkify.js";
import "../../../node_modules/linkify-string/dist/linkify-string.js";
import "../../../functions/parseMarkdown.js";
import Q from "../../1_icons/MenuIcon.vue.js";
const W = { class: "contact-context-menu__wrapper" }, X = ["id"], se = /* @__PURE__ */ V({
  __name: "ContactContextMenu",
  props: {
    actions: {
      type: Array,
      required: !0
    },
    mode: {
      type: String,
      required: !1,
      default: "hover"
    },
    disabled: {
      type: Boolean,
      default: !1,
      required: !1
    },
    menuSide: {
      type: String,
      required: !1,
      default: "top"
    }
  },
  emits: ["click", "buttonClick", "menuMouseEnter", "menuMouseLeave"],
  setup(y, { expose: B, emit: E }) {
    const I = _("chatAppId"), m = _("extChatAppId", ""), { getTheme: g } = K(I), n = y, f = R(), u = E, c = h(null), s = h(), r = h(!1), i = j(() => Array.isArray(n.actions) && n.actions.length > 0);
    let d = !1;
    const S = (t) => {
      l(), u("click", t);
    }, L = () => {
      !n.disabled && i.value && (n.mode == "click" && !r.value ? p() : n.mode == "click" && r.value && l(), u("buttonClick"));
    }, O = () => {
      !n.disabled && i.value && n.mode == "hover" && p();
    }, q = () => {
      !n.disabled && i.value && n.mode == "hover" && l();
    }, T = () => {
      u("menuMouseEnter"), !n.disabled && i.value && n.mode == "hover" && p();
    }, N = () => {
      u("menuMouseLeave"), !n.disabled && i.value && n.mode == "hover" && l();
    }, p = () => {
      if (i.value && s.value && c.value) {
        const t = c.value, e = s.value.getBoundingClientRect();
        t.style.display = "inherit";
        const o = c.value.getBoundingClientRect();
        t.style.display = "none", A(() => {
          const C = {
            left: { top: e.top - (o.height - e.height) / 2 - o.top, left: e.left - o.width - o.left },
            right: { top: e.top - (o.height - e.height) / 2 - o.top, left: e.left + e.width - o.left },
            bottom: { top: (e == null ? void 0 : e.bottom) - o.top, left: (e == null ? void 0 : e.left) - (o.width - e.width) / 2 - o.left },
            top: { top: e.top - o.height - o.top, left: (e == null ? void 0 : e.left) - (o.width - e.width) / 2 - o.left },
            "top-right": { top: e.top - o.height, left: e.right - o.width / 2 },
            "bottom-left": { top: (e == null ? void 0 : e.bottom) - o.top + 10, left: e.left - o.width - o.left + 50 }
          };
          t.style.top = C[n.menuSide].top + "px", t.style.left = C[n.menuSide].left + "px", t.style.opacity = "1", t.style.visibility = "visible", t.style.display = "inherit", r.value = !0;
        });
      }
    }, l = () => {
      if (c.value) {
        const t = c.value;
        t && (t.style.top = "0", t.style.left = "0", t.style.opacity = "0", t.style.visibility = "hidden", t.style.display = "none", r.value = !1);
      }
    }, k = (t) => {
      n.mode == "click" && s.value && !s.value.contains(t.target) && l();
    }, x = () => {
      A(() => {
        c.value = document.getElementById("context-menu-" + f + m), c.value && (l(), d || (document.addEventListener("click", k), d = !0));
      });
    };
    return z(() => {
      x();
    }), P(i, (t) => {
      if (t) {
        x();
        return;
      }
      l();
    }), U(() => {
      d && (document.removeEventListener("click", k), d = !1), c.value && l();
    }), B({
      updatePosition: p,
      hideMenu: l
    }), (t, e) => (v(), D("div", W, [
      M("button", {
        id: "container-" + a(f) + a(m),
        ref_key: "actionScope",
        ref: s,
        class: b([
          "contact-context-menu__button",
          { "contact-context-menu__button--no-actions": !i.value }
        ]),
        onMouseenter: O,
        onMouseleave: q,
        onClick: L
      }, [
        M("span", {
          class: b([
            "contact-context-menu__icon",
            { "contact-context-menu__icon--no-actions": !i.value }
          ])
        }, [
          F(Q)
        ], 2),
        (v(), w(G, { to: "body" }, [
          i.value ? (v(), w(J, {
            key: 0,
            id: "context-menu-" + a(f) + a(m),
            actions: y.actions,
            "data-theme": a(g)().theme ? a(g)().theme : "light",
            onMouseenter: T,
            onMouseleave: N,
            onClick: S
          }, null, 8, ["id", "actions", "data-theme"])) : H("", !0)
        ]))
      ], 42, X)
    ]));
  }
});
export {
  se as default
};
