import { jsxs as i, jsx as n } from "react/jsx-runtime";
import { useState as l, useMemo as m, useCallback as r } from "react";
import T from "../../Command.js";
import { COMMAND_VARIANT as x } from "../../constants/index.js";
import { searchConfigGroup as s } from "../constants/index.js";
import b from "./hooks/useArticleQuery.js";
import d from "../../../box/Box.js";
import u from "../../../text/Text.js";
const v = s[0].items.map((t) => t.value), D = s[1].items.map((t) => t.value), M = () => {
  const [t, c] = l(""), [o, h] = l(["productName", "sku", "contains"]), p = m(() => o.filter((e) => v.includes(e)), [o]), f = m(() => o.filter((e) => D.includes(e)), [o]), { isLoading: a, groups: g } = b(t, { searchFields: p, searchTypes: f }), S = r((e) => {
    c(e);
  }, []), C = r((e) => {
    console.log("Selected item:", e);
  }, []), I = r((e, N) => {
    h(e), c(N);
  }, []), A = {
    groups: s,
    onSelectionChange: I,
    defaultSelectedItem: o
  }, y = /* @__PURE__ */ n(u, { type: "small", weight: "medium", align: "center", children: "Primary" });
  return /* @__PURE__ */ i(d, { className: "space-y-4 w-[400px]", children: [
    /* @__PURE__ */ n(
      T,
      {
        variant: x.DETAILED,
        groups: g,
        isLoading: a,
        onDebouncedValueChange: S,
        onItemSelect: C,
        searchConfig: A,
        delay: 400,
        showLoadingOnType: !0,
        shouldFilter: !1,
        placeholder: "Search with configuration...",
        loadingLabel: "Searching...",
        footer: !a && y
      }
    ),
    /* @__PURE__ */ n(d, { className: "p-3 bg-[var(--soft-bg-coral)] rounded-md text-sm", children: /* @__PURE__ */ i(u, { type: "small", weight: "medium", children: [
      /* @__PURE__ */ n("strong", { children: "Active Config:" }),
      " ",
      o.join(", ") || "None selected"
    ] }) })
  ] });
};
export {
  M as default
};
//# sourceMappingURL=AdvancedCommand.js.map
