import { jsxs as I, jsx as r } from "@emotion/react/jsx-runtime";
import h from "../DynamicSortBase/useDynamicSortBase.js";
import C from "./usePopoverMenuFields.js";
import { Icon as P } from "@m4l/base";
import { DICCTIONARY as g } from "../../dictionary.js";
import { useModuleDictionary as F } from "@m4l/core";
import { usePopoverContainer as M } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
import { PopoverMenuStyled as x } from "../../slots/DynamicSortSlots.js";
import { MenuItem as a } from "../../../extended/mui/MenuItem/MenuItem.js";
function A(l) {
  const { fields: n, selectFieldIndex: m } = l, { elementRef: p, handleOpenPopUpClickItem: c, handleClosePopover: u, getItemLabel: s, isOpenPopoverMenuFields: o } = C(), { size: t } = h(), d = p?.current, { getLabel: f } = F(), i = M(!!o);
  return !o || !i ? null : /* @__PURE__ */ I(
    x,
    {
      disableAutoFocus: !0,
      disableRestoreFocus: !0,
      arrowType: "top-left",
      anchorOrigin: { vertical: "bottom", horizontal: "left" },
      transformOrigin: { vertical: "top", horizontal: "left" },
      open: !!o,
      onClose: u,
      anchorEl: d,
      container: i,
      sx: (e) => ({
        mt: e.vars.size.baseSpacings.sp2
      }),
      children: [
        o && n.map((e, b) => /* @__PURE__ */ r(
          a,
          {
            startIcon: /* @__PURE__ */ r(P, { size: t, src: e.urlIcon }),
            label: s(e),
            dense: !0,
            size: t,
            selected: b === m,
            "data-testid": "dynamic-sort-field-option",
            "data-field-name": e.name,
            onClick: (v) => c(v, e)
          },
          `menu_action_${s(e)}`
        )),
        o && n.length === 0 && /* @__PURE__ */ r(
          a,
          {
            dense: !0,
            size: t,
            label: f(g.label_no_fields_available),
            disabled: !0
          }
        )
      ]
    }
  );
}
export {
  A as default
};
