import { useState as q, useRef as I, useEffect as M } from "react";
import { ANALYTICS_OVERLAY_SELECTOR as H, createAnalyticsLookupKey as Y, EVENT_TYPE_ICON_CLASS as K, toEventType as Q } from "./analyticsAnalysisUtils.js";
import { createAnalyticsOverlayTooltip as j } from "./createAnalyticsOverlayTooltip.js";
import { logAnalyticsOverlayUnmatchedEntries as G } from "./logAnalyticsOverlayUnmatchedEntries.js";
const te = (F) => {
  const { analyticsLookup: m, overlayBackgroundOpacity: C, showOverlayDetails: y, showOverlayLabelText: g, analyticsTotalUsers: N } = F, [V, T] = q(null), w = I(/* @__PURE__ */ new WeakSet()), h = I(null), x = m.size > 0;
  return M(() => {
    w.current = /* @__PURE__ */ new WeakSet(), h.current = null;
  }, [m, y]), M(() => {
    const r = document.createElement("div");
    r.setAttribute("data-analytics-overlay-root", "true"), r.classList.add("position-fixed"), r.classList.add("inset-0"), r.classList.add("pointer-events-none"), r.classList.add("z-index-max"), r.style.backgroundColor = x && y ? `rgba(0,0,0,${C})` : "rgba(0,0,0,0)";
    const b = document.createElement("div");
    b.setAttribute("data-analytics-overlay-banner", "true"), b.classList.add("pointer-events-all"), r.appendChild(b), T(b), document.body.appendChild(r);
    let O = 0, k = !1, E = null, L = null;
    const D = (t) => {
      const e = Number(t);
      return Number.isFinite(e) ? e : 0;
    }, d = () => {
      E?.remove(), E = null, L = null;
    }, B = (t) => {
      const e = t.element.getBoundingClientRect();
      if (e.width === 0 || e.height === 0 || e.bottom <= 0 || e.top >= window.innerHeight || e.right <= 0 || e.left >= window.innerWidth)
        return null;
      const n = document.createElement("div");
      n.classList.add(
        "position-fixed",
        "label",
        "label-secondary",
        "label-filled",
        "label-condensed",
        "ellipsis-1",
        "shadow-focused",
        "white-space-no-wrap",
        "text-normal",
        "pointer-events-all",
        "cursor-pointer",
        "hover-z-index-1",
        "hover-bg-black",
        "hover-border-color-black"
      ), n.setAttribute("data-analytics-overlay-label", "true"), n.style.top = `${e.top + 4}px`, n.style.left = `${e.left + 4}px`, n.style.maxWidth = "min(80vw, 420px)";
      const v = (s) => {
        s.preventDefault(), s.stopPropagation(), w.current.add(t.element), L === n && d(), n.remove();
      }, p = t.entries.reduce((s, f) => s + D(f.eventCount), 0), c = t.entries.reduce((s, f) => s + D(f.totalUsers), 0), i = K[t.eventType], l = "rioglyph-remove", o = document.createElement("span");
      o.classList.add("text-size-14", "margin-left-1", "rioglyph", "margin-right-0", i), n.appendChild(o), g && (o.addEventListener("pointerdown", v), o.addEventListener("click", v));
      const P = () => {
        i !== l && (o.classList.remove(i), o.classList.add(l));
      }, U = () => {
        i !== l && (o.classList.remove(l), o.classList.add(i));
      };
      g && (o.addEventListener("mouseenter", P), o.addEventListener("mouseleave", U));
      const A = document.createElement("span");
      return A.textContent = `${p} times / ${c} users`, A.classList.add(
        g ? "display-inline" : "display-none",
        "text-size-10",
        "line-height-14",
        "margin-left-5"
      ), n.appendChild(A), n.addEventListener("click", (s) => {
        s.preventDefault(), s.stopPropagation();
        const f = s, W = L === n;
        d(), !W && (E = j({
          overlayRoot: r,
          trackingData: {
            eventAction: t.eventAction,
            eventLabel: t.eventLabel,
            eventTrigger: t.eventTrigger
          },
          totalEventCount: p,
          totalUserCount: c,
          analyticsTotalUsers: N,
          clickEvent: f,
          trackedElement: t.element
        }), L = n);
      }), n;
    }, _ = (t) => t.reduce((e, a) => {
      const n = a.getAttribute("data-track-ga-event-action"), v = a.getAttribute("data-track-ga-event-label"), p = a.getAttribute("data-track-ga-event-trigger"), c = p === "click" || p === "visibility" ? p : null, i = c ? Q(c) : null;
      if (!n || !v || !c || !i || w.current.has(a))
        return e;
      const l = m.get(Y(n, v));
      return !l || l.length === 0 || e.push({ element: a, eventAction: n, eventLabel: v, eventTrigger: c, eventType: i, entries: l }), e;
    }, []), $ = () => {
      k = !1, d(), r.querySelectorAll("[data-analytics-overlay-label]").forEach((a) => {
        a.remove();
      });
      const t = Array.from(document.querySelectorAll(H));
      if (h.current = G({
        analyticsLookup: m,
        trackedElements: t,
        previousFingerprint: h.current
      }), !y)
        return;
      _(t).forEach((a) => {
        const n = B(a);
        n && r.appendChild(n);
      });
    }, u = () => {
      k || (k = !0, O = window.requestAnimationFrame($));
    }, R = new MutationObserver((t) => {
      t.some((a) => !r.contains(a.target)) && u();
    });
    R.observe(document.body, {
      childList: !0,
      subtree: !0,
      attributes: !0,
      attributeFilter: ["data-track-ga-event-action", "data-track-ga-event-label", "data-track-ga-event-trigger"]
    });
    const S = (t) => {
      const e = t.target;
      e instanceof Node && (E?.contains(e) || e instanceof Element && e.closest("[data-analytics-overlay-label]") || d());
    }, z = (t) => {
      t.key === "Escape" && d();
    };
    return document.addEventListener("pointerdown", S, !0), document.addEventListener("keydown", z), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), u(), () => {
      T(null), d(), document.removeEventListener("pointerdown", S, !0), document.removeEventListener("keydown", z), window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u), R.disconnect(), window.cancelAnimationFrame(O), r.remove();
    };
  }, [m, x, C, y, g]), V;
};
export {
  te as default
};
//# sourceMappingURL=useAnalyticsOverlayDom.js.map
