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