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