"use client";
import { jsxs as n, jsx as r } from "react/jsx-runtime";
import { Accordion as s } from "../../shared/accordion.js";
import { ScrollArea as p } from "../../shared/scroll-area.js";
import { BuilderConfiguration as c } from "../../../config/builder.config.js";
import { objectKeys as d, classNames as h } from "../../../../../../utils.js";
import { useState as g, useMemo as f } from "react";
import { BiSearch as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import N from "./block-navigation-item.js";
const v = () => {
  const [a, u] = g(""), m = c.getBlocks(), o = f(() => m.filter((e) => e.label.toLowerCase().includes(a.toLowerCase())).reduce(
    (e, i) => {
      const t = i.group ?? "Others";
      return e[t] || (e[t] = []), e[t].push(i), e;
    },
    {}
  ), [a, m]);
  return /* @__PURE__ */ n("div", { className: "block-navigation", children: [
    /* @__PURE__ */ r("div", { className: "mt-4 h-12 w-full bg-white px-4", children: /* @__PURE__ */ n("div", { className: "group flex items-center  overflow-hidden rounded-sm  ring-1 ring-gray-300 focus-within:ring-2 focus-within:ring-gray-600", children: [
      /* @__PURE__ */ r("div", { className: "ms-2.5 flex w-7 items-center justify-center", children: /* @__PURE__ */ r(x, { className: " text-gray-500 group-focus-within:text-gray-700", size: 18 }) }),
      /* @__PURE__ */ r(
        "input",
        {
          value: a,
          onChange: (e) => {
            u(e.target.value);
          },
          type: "text",
          className: "focus:outline-hidden w-full rounded-sm border-0 px-1 py-2 text-sm placeholder:text-sm placeholder:text-gray-500 focus:ring-0",
          placeholder: "Search..."
        }
      )
    ] }) }),
    d(o).length === 0 && /* @__PURE__ */ r("div", { className: "py-2 text-center text-sm text-gray-600", children: "No blocks found" }),
    /* @__PURE__ */ r(p, { className: "h-[calc(100vh-125px)]", children: /* @__PURE__ */ r(s, { defaultValue: Object.keys(o), type: "multiple", children: d(o).sort((e, i) => {
      const t = c.getGroupOrder(e), l = c.getGroupOrder(i);
      return t !== -1 && l !== -1 ? t - l : t !== -1 ? -1 : l !== -1 ? 1 : 0;
    }).map((e, i) => /* @__PURE__ */ n(s.Item, { value: e, children: [
      /* @__PURE__ */ r(
        s.Trigger,
        {
          className: h("px-4", {
            "pt-1": i === 0
          }),
          children: e
        }
      ),
      /* @__PURE__ */ r(s.Content, { className: "px-4", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-3 py-2", children: o[e].map((t) => /* @__PURE__ */ r(N, { block: t }, t.type)) }) })
    ] }, e)) }) })
  ] });
};
v.displayName = "BlockNavigation";
export {
  v as BlockNavigation
};
//# sourceMappingURL=block-navigation.js.map
