import { jsxs as f, Fragment as S, jsx as o } from "@emotion/react/jsx-runtime";
import { useRef as x, useEffect as F } from "react";
import { ActionsSortDuotone as g } from "@m4l/icons";
import I from "../DynamicSortBase/useDynamicSortBase.js";
import P from "./useInputSort.js";
import { InputSortTriggerButtonStyled as v } from "../../slots/DynamicSortSlots.js";
import h from "../PopoverMenuFields/PopoverMenuFields.js";
const B = () => {
  const {
    isSkeleton: n,
    inputPlaceHolder: i,
    inputData: s,
    inputHandlersProps: l,
    sortFields: a,
    selectedFieldIndex: p,
    setElementRef: r,
    isOpenPopoverMenuFields: e,
    isOpenPopoverSort: d,
    handleTriggerClick: u
  } = P(), t = x(null), { ownerState: c, size: m } = I();
  return F(() => {
    r(t);
  }, [r, t]), /* @__PURE__ */ f(S, { children: [
    /* @__PURE__ */ o(
      v,
      {
        ref: t,
        icon: /* @__PURE__ */ o(g, {}),
        variant: "outline",
        color: e ? "info" : "default",
        selected: e,
        size: m,
        "aria-label": "searchbox",
        "aria-expanded": e || d,
        ownerState: { ...c, selected: e },
        onClick: u
      }
    ),
    /* @__PURE__ */ o(
      h,
      {
        fields: a,
        selectFieldIndex: p,
        inputData: s,
        inputPlaceHolder: i,
        inputHandlersProps: l,
        isSkeleton: n
      }
    )
  ] });
};
export {
  B as default
};
