import { jsx as f } from "@emotion/react/jsx-runtime";
import { getPropertyByString as c } from "@m4l/core";
import { useTheme as u } from "@mui/material";
import { forwardRef as g, useRef as h } from "react";
import { getComponentSlotRoot as w } from "../../../../utils/getComponentSlotRoot.js";
import { PopperRootStyled as P } from "./slots/PopperStlots.js";
const b = g((t, r) => {
  const {
    color: e = "default",
    variant: a = "standard",
    children: n,
    anchorEl: p,
    arrow: l = !1,
    placement: v,
    initialPlacement: m = "top",
    ...i
  } = t, o = u(), s = h(null), d = {
    paletteColor: c(
      o.vars.palette,
      e || "default",
      o.vars.palette.default
    ),
    popperColor: e,
    arrow: l,
    variant: a
  };
  return /* @__PURE__ */ f(
    P,
    {
      "aria-label": t.placement,
      placement: t.placement || m,
      "data-testid": "popper-root",
      className: w("M4LPopperClass"),
      ownerState: { ...d },
      anchorEl: p,
      color: e,
      ref: r,
      modifiers: [
        {
          name: "preventOverflow",
          options: {
            boundary: "viewport",
            padding: 8
          }
        },
        {
          name: "flip",
          options: {
            // Se implementan los fallback placements, ya que esto obligara a que el Popper se muestre siguiendo las posiciones establecidas y no se las salte.ninguna posicion al rehubicarse.
            fallbackPlacements: [
              "bottom-start",
              "bottom",
              "bottom-end",
              "top-start",
              "top",
              "top-end",
              "left",
              "left-start",
              "left-end",
              "right",
              "right-start",
              "right-end"
            ]
          }
        },
        {
          name: "arrow",
          options: {
            element: s.current,
            padding: 8
          }
        }
      ],
      ...i,
      children: n
    }
  );
});
b.displayName = "Popper";
export {
  b as Popper
};
