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