import p, { Fragment as b, createContext as C, useContext as m, useRef as y, useMemo as h, useState as R, useEffect as P } from "react";
import { createPortal as A } from "react-dom";
import { useEvent as g } from "../../hooks/use-event.js";
import { useIsoMorphicEffect as E } from "../../hooks/use-iso-morphic-effect.js";
import { useOnUnmount as G } from "../../hooks/use-on-unmount.js";
import { useOwnerDocument as S } from "../../hooks/use-owner.js";
import { useServerHandoffComplete as I } from "../../hooks/use-server-handoff-complete.js";
import { useSyncRefs as d, optionalRef as M } from "../../hooks/use-sync-refs.js";
import { usePortalRoot as j } from "../../internal/portal-force-root.js";
import { env as $ } from "../../utils/env.js";
import { forwardRefWithAs as c, useRender as v } from "../../utils/render.js";
function w(a) {
  let l = j(), o = m(N), e = S(a), [u, r] = R(() => {
    var t;
    if (!l && o !== null) return (t = o.current) != null ? t : null;
    if ($.isServer) return null;
    let n = e == null ? void 0 : e.getElementById("headlessui-portal-root");
    if (n) return n;
    if (e === null) return null;
    let i = e.createElement("div");
    return i.setAttribute("id", "headlessui-portal-root"), e.body.appendChild(i);
  });
  return P(() => {
    u !== null && (e != null && e.body.contains(u) || e == null || e.body.appendChild(u));
  }, [u, e]), P(() => {
    l || o !== null && r(o.current);
  }, [o, r, l]), u;
}
let x = b, H = c(function(a, l) {
  let o = a, e = y(null), u = d(M((s) => {
    e.current = s;
  }), l), r = S(e), t = w(e), [n] = R(() => {
    var s;
    return $.isServer ? null : (s = r == null ? void 0 : r.createElement("div")) != null ? s : null;
  }), i = m(f), O = I();
  E(() => {
    !t || !n || t.contains(n) || (n.setAttribute("data-headlessui-portal", ""), t.appendChild(n));
  }, [t, n]), E(() => {
    if (n && i) return i.register(n);
  }, [i, n]), G(() => {
    var s;
    !t || !n || (n instanceof Node && t.contains(n) && t.removeChild(n), t.childNodes.length <= 0 && ((s = t.parentElement) == null || s.removeChild(t)));
  });
  let T = v();
  return O ? !t || !n ? null : A(T({ ourProps: { ref: u }, theirProps: o, slot: {}, defaultTag: x, name: "Portal" }), n) : null;
});
function W(a, l) {
  let o = d(l), { enabled: e = !0, ...u } = a, r = v();
  return e ? p.createElement(H, { ...u, ref: o }) : r({ ourProps: { ref: o }, theirProps: u, slot: {}, defaultTag: x, name: "Portal" });
}
let _ = b, N = C(null);
function B(a, l) {
  let { target: o, ...e } = a, u = { ref: d(l) }, r = v();
  return p.createElement(N.Provider, { value: o }, r({ ourProps: u, theirProps: e, defaultTag: _, name: "Popover.Group" }));
}
let f = C(null);
function Z() {
  let a = m(f), l = y([]), o = g((r) => (l.current.push(r), a && a.register(r), () => e(r))), e = g((r) => {
    let t = l.current.indexOf(r);
    t !== -1 && l.current.splice(t, 1), a && a.unregister(r);
  }), u = h(() => ({ register: o, unregister: e, portals: l }), [o, e, l]);
  return [l, h(() => function({ children: r }) {
    return p.createElement(f.Provider, { value: u }, r);
  }, [u])];
}
let D = c(W), F = c(B), ee = Object.assign(D, { Group: F });
export {
  ee as Portal,
  F as PortalGroup,
  Z as useNestedPortals
};
