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