import { jsx as a } from "react/jsx-runtime";
import { useRef as d, useState as f, useEffect as p } from "react";
import "./style.less.mjs";
import { placementStringToArr as O, getPlacementPosition as S, getOffsetX as T, getOffsetY as w } from "./utils.mjs";
const V = (t) => {
  var u;
  const {
    children: b,
    defaultPosition: g,
    forElement: E,
    placement: x = "right-bottom",
    curserPosition: y,
    className: h,
    style: L
  } = t, P = d(null), n = d(null), e = E || document.body, o = O(x), i = S(o, (u = n.current) == null ? void 0 : u.getBoundingClientRect(), y), [$, s] = f(t.visible || !0), [r, N] = f(g || {
    x: -2e3,
    y: -2e3
  });
  p(() => (e.addEventListener("mouseenter", m), e.addEventListener("mousemove", c), e.addEventListener("mouseleave", l), () => {
    e.removeEventListener("mouseenter", m), e.removeEventListener("mousemove", c), e.removeEventListener("mouseleave", l);
  }), [e]), p(() => {
    s(t.visible || !0);
  }, [t.visible]);
  const m = () => {
    s(!0);
  }, l = () => {
    s(!1);
  }, c = (v) => {
    let R = T(v) + i.x;
    const j = w(v) + i.y;
    N({
      x: R,
      y: j
    });
  };
  return /* @__PURE__ */ a("div", {
    className: `g-mouse-tip ${o.join(" ")}`,
    ref: P,
    style: {
      left: `${r.x}px`,
      top: `${r.y}px`,
      visibility: `${$ ? "visible" : "hidden"}`
    },
    children: /* @__PURE__ */ a("div", {
      className: `g-mouse-tip-content ${h}`,
      style: L,
      ref: n,
      children: b
    })
  });
};
export {
  V as MouseTip
};
