import { jsxs as u, jsx as t } from "@emotion/react/jsx-runtime";
import { useRef as C, useEffect as g, cloneElement as M, isValidElement as O } from "react";
import { ActionsSearchOutlined as R } from "@m4l/icons";
import { Icon as w } from "@m4l/base";
import _ from "./usePopoverMenuFields.js";
import k from "../DynamicFilterBase/useDynamicFilterBase.js";
import { useModuleDictionary as z } from "@m4l/core";
import { DICCTIONARY as A } from "../../dictionary.js";
import { usePopoverContainer as D } from "../../../../hooks/usePopoverContainer/usePopoverContainer.js";
import { PopoverMenuStyled as E, InputFilterStyled as j, InputFilterInputSkeletonStyled as H, InputFilterInputStyled as L } from "../../slots/dynamicFilterSlots.js";
import { MenuItem as c } from "../../../extended/mui/MenuItem/MenuItem.js";
function Q(p) {
  const { fields: l, selectFieldIndex: m, inputData: d, inputPlaceHolder: f, inputHandlersProps: I, isSkeleton: b } = p, { elementRef: h, handleOpenPopUpClickItem: v, handleClosePopover: S, getItemLabel: i, isOpenPopoverMenuFields: o } = _(), F = h?.current, { getLabel: x } = z(), a = D(!!o), { size: r, ownerState: n } = k(), s = C(null);
  return g(() => {
    o && requestAnimationFrame(() => {
      s.current?.focus();
    });
  }, [o]), !o || !a ? null : /* @__PURE__ */ u(
    E,
    {
      disableAutoFocus: !0,
      disableRestoreFocus: !0,
      arrowType: "top-left",
      anchorOrigin: { vertical: "bottom", horizontal: "left" },
      transformOrigin: { vertical: "top", horizontal: "left" },
      sx: (e) => ({
        mt: e.vars.size.baseSpacings.sp2
      }),
      open: !!o,
      onClose: S,
      anchorEl: F,
      container: a,
      children: [
        /* @__PURE__ */ u(j, { ownerState: { ...n }, children: [
          /* @__PURE__ */ t(w, { size: r, src: /* @__PURE__ */ t(R, {}), color: "text.secondary" }),
          b ? /* @__PURE__ */ t(H, { ownerState: { ...n }, variant: "rounded" }) : /* @__PURE__ */ t(
            L,
            {
              ref: s,
              type: "text",
              value: d,
              placeholder: f,
              ownerState: { ...n },
              role: "searchbox",
              "aria-label": "searchbox",
              ...I
            }
          )
        ] }),
        l.map((e, y) => /* @__PURE__ */ t(
          c,
          {
            dense: !0,
            size: r,
            selected: y === m,
            onClick: (P) => v(P, e),
            startIcon: O(e.urlIcon) ? M(e.urlIcon, { size: r }) : e.urlIcon,
            label: i(e)
          },
          `menu_action_${i(e)}`
        )),
        l.length === 0 && /* @__PURE__ */ t(
          c,
          {
            dense: !0,
            size: r,
            label: x(A.label_no_fields_available),
            disabled: !0
          }
        )
      ]
    }
  );
}
export {
  Q as default
};
