import { defineComponent as _, inject as I, useId as q, ref as f, onMounted as L, nextTick as y, onUnmounted as O, createElementBlock as T, openBlock as k, unref as c, createElementVNode as A, createBlock as N, renderSlot as R, Teleport as V, createVNode as j } from "vue";
import P from "../ContextMenu/ContextMenu.vue.js";
import "../../../hooks/useMessageDraft.js";
import "../../../hooks/useSearchModel.js";
import { useTheme as U } 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";
const $ = ["id"], Y = /* @__PURE__ */ _({
  __name: "ButtonContextMenu",
  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(m, { expose: M, emit: C }) {
    const r = I("chatAppId"), { getTheme: h } = U(r), i = m, p = q(), d = C, n = f(), s = f(), a = f(!1), b = (t) => {
      l(), d("click", t);
    }, x = () => {
      i.disabled || (i.mode == "click" && !a.value ? u() : i.mode == "click" && a.value && l(), d("buttonClick"));
    }, w = () => {
      i.disabled || i.mode == "hover" && u();
    }, B = () => {
      i.disabled || i.mode == "hover" && l();
    }, S = () => {
      d("menuMouseEnter"), i.disabled || i.mode == "hover" && u();
    }, E = () => {
      d("menuMouseLeave"), i.disabled || i.mode == "hover" && l();
    }, u = () => {
      if (s.value && n.value) {
        const t = n.value, e = s.value.getBoundingClientRect();
        t.style.display = "inherit";
        const o = n.value.getBoundingClientRect();
        t.style.display = "none", y(() => {
          const g = {
            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-right": { top: e.bottom, left: e.right - o.width }
          };
          t.style.top = g[i.menuSide].top + "px", t.style.left = g[i.menuSide].left + "px", t.style.opacity = "1", t.style.display = "inherit", a.value = !0;
        });
      }
    }, l = () => {
      if (n.value) {
        const t = n.value;
        t && (t.style.top = "0", t.style.left = "0", t.style.opacity = "0", t.style.display = "none", a.value = !1);
      }
    }, v = (t) => {
      i.mode == "click" && s.value && !s.value.contains(t.target) && l();
    };
    return L(() => {
      y(() => {
        n.value = document.getElementById("context-menu-" + p + r), n.value && (l(), document.addEventListener("click", v));
      });
    }), O(() => {
      document.removeEventListener("click", v);
    }), M({
      updatePosition: u,
      hideMenu: l
    }), (t, e) => (k(), T("button", {
      id: "container-" + c(p) + c(r),
      ref_key: "actionScope",
      ref: s,
      style: { position: "relative", width: "fit-content", border: "none", background: "transparent", height: "fit-content" },
      onMouseenter: w,
      onMouseleave: B
    }, [
      A("div", { onClick: x }, [
        R(t.$slots, "default", {}, void 0, !0)
      ]),
      (k(), N(V, { to: "body" }, [
        j(P, {
          id: "context-menu-" + c(p) + c(r),
          actions: m.actions,
          "data-theme": c(h)().theme ? c(h)().theme : "light",
          onMouseenter: S,
          onMouseleave: E,
          onClick: b
        }, null, 8, ["id", "actions", "data-theme"])
      ]))
    ], 40, $));
  }
});
export {
  Y as default
};
