"use client";
import { jsx as u } from "react/jsx-runtime";
import { useState as E, useRef as O, useCallback as l, useMemo as a, useEffect as P } from "react";
import { Popover as y } from "react-tiny-popover";
import { useIsMobile as L } from "../../utils/useIsMobile.es.js";
import S from "../../components/ComplexTooltip/complexTooltip.module.css";
import { ComplexTooltipContent as j } from "./components/ComplexTooltipContent/ComplexTooltipContent.es.js";
const B = ({
  trigger: o,
  title: m,
  description: f,
  link: v,
  transformMode: s = "relative",
  transform: b = { top: 0, left: 0 },
  style: h = "light",
  isBlurred: T = !1,
  children: p,
  positions: d = ["top", "bottom", "left", "right"],
  onClose: n
}) => {
  const [C, i] = E(!1), e = O(null), r = l(() => {
    e.current && clearTimeout(e.current), e.current = setTimeout(() => i(!0), 200);
  }, []), t = l(() => {
    e.current = setTimeout(() => {
      i(!1), n == null || n();
    }, 200);
  }, [n]), c = l(() => i((x) => !x), []), M = a(() => o === "hover" ? {
    onMouseEnter: r,
    onMouseLeave: t
  } : {
    onClick: c
  }, [o, r, t, c]), k = a(() => o === "hover" ? {
    onMouseEnter: r,
    onMouseLeave: t
  } : {}, [o, r, t]);
  return P(() => () => {
    e.current && clearTimeout(e.current);
  }, []), L() ? p : /* @__PURE__ */ u(
    y,
    {
      isOpen: C,
      positions: d,
      padding: 8,
      onClickOutside: t,
      containerClassName: S.popover,
      transformMode: s,
      transform: s === "absolute" ? b : void 0,
      containerStyle: { pointerEvents: s === "absolute" ? "none" : "auto" },
      content: /* @__PURE__ */ u(
        j,
        {
          title: m,
          description: f,
          link: v,
          style: h,
          isBlurred: T,
          onClose: t,
          ...k
        }
      ),
      children: /* @__PURE__ */ u("div", { ...M, children: p })
    }
  );
};
export {
  B as ComplexTooltip
};
