import { jsxs as S, jsx as e } from "@emotion/react/jsx-runtime";
import { useRef as f, useEffect as I } from "react";
import { Icon as x } from "@m4l/base";
import v from "../DynamicSortBase/useDynamicSortBase.js";
import y from "./useInputSort.js";
import { InputSortStyled as F, InputSortInputSkeletonStyled as P, InputSortInputStyled as h } from "../../slots/DynamicSortSlots.js";
import w from "../PopoverMenuFields/PopoverMenuFields.js";
const M = () => {
  const {
    iconUrl: n,
    isSkeleton: s,
    inputPlaceHolder: l,
    inputData: p,
    inputHandlersProps: i,
    sortFields: a,
    selectedFieldIndex: d,
    setElementRef: o,
    isOpenPopoverMenuFields: u,
    isOpenPopoverSort: m
  } = y(), r = f(null);
  I(() => {
    o(r);
  }, [o]);
  const { ownerState: t, size: c } = v();
  return /* @__PURE__ */ S(F, { ownerState: { ...t }, "aria-expanded": u || m, children: [
    /* @__PURE__ */ e(x, { src: n, size: c }),
    s ? /* @__PURE__ */ e(P, { ownerState: { ...t }, variant: "rounded" }) : /* @__PURE__ */ e(
      h,
      {
        ref: r,
        type: "text",
        value: p,
        placeholder: l,
        ownerState: { ...t },
        role: "searchbox",
        "aria-label": "searchbox",
        ...i
      }
    ),
    /* @__PURE__ */ e(w, { fields: a, selectFieldIndex: d })
  ] });
};
export {
  M as default
};
