import { jsxs as I, Fragment as R, jsx as l } from "react/jsx-runtime";
import { useState as f, useRef as _, useEffect as p } from "react";
import k from "./index-PopoverModal.module.scss.js";
import C from "./index-Backdrop.js";
import M from "./index-Popper.js";
const d = 1030, N = (o) => {
  const {
    content: s,
    isOpen: u,
    openOnHover: w,
    dimRestOfPage: h = !1,
    onClose: a,
    disableBackdropClick: m = !1,
    zIndex: n = 0,
    // default zIndex value
    centerPopover: E,
    placement: g = "top",
    renderInPortal: P = !1
  } = o, [e, c] = f(o.anchorEl ?? null), [x, B] = f([0, 0]), t = _(null);
  p(() => {
    c(o.anchorEl ?? null);
  }, [o.anchorEl]), p(() => {
    if (e && t.current) {
      const r = e.getBoundingClientRect().height, y = t.current.getBoundingClientRect().height;
      B([0, -r / 2 - y / 2]);
    }
  }, [e, s]);
  const v = () => {
    c(null), a && a();
  }, A = (r) => {
    m || v(), r.stopPropagation();
  }, O = E ? [{
    name: "flip",
    options: {
      altBoundary: !0,
      rootBoundary: "viewport",
      padding: 8
    }
  }, {
    name: "preventOverflow",
    options: {
      altAxis: !0,
      tether: !0
    }
  }, {
    name: "offset",
    options: {
      offset: x
    }
  }, {
    name: "computeStyles",
    options: {
      gpuAcceleration: !1
    }
  }] : [], i = u || !!e;
  return e ? I(R, {
    children: [h && l(C, {
      open: i,
      className: k.backdrop,
      onMouseDown: A,
      sx: {
        zIndex: n + d
      }
    }), l(M, {
      open: i,
      anchorEl: e,
      placement: g,
      disablePortal: !P,
      style: {
        zIndex: n + d + 1
      },
      modifiers: [...O],
      children: l("span", {
        ref: t,
        style: {
          position: "relative",
          zIndex: n + 1
        },
        children: s
      })
    })]
  }) : null;
};
export {
  N as PopoverModal
};
