import { j as e } from "../../../../../../../_virtual/jsx-runtime.js";
import { useState as d, useRef as P, useEffect as w, useMemo as O, startTransition as R } from "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { Icon as F } from "../../../../../../../node_modules/.pnpm/@iconify_react@6.0.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/@iconify/react/dist/iconify.js";
import Q from "../../../../shared/misc/iconify-collections.json.js";
import { tx as M, css as V } from "../../../../../../style-system/dist/twind.js";
import { useVirtualizer as W } from "../../../../../../../node_modules/.pnpm/@tanstack_react-virtual@3.13.12_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0_38897ee9638f3769c25978aec2a761e4/node_modules/@tanstack/react-virtual/dist/esm/index.js";
import { RxMagnifyingGlass as q } from "../../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import { FieldTitle as D } from "../field-factory.js";
import { Root as U, Trigger as Y, Content as J } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/popover.js";
import { Button as K } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as X, Trigger as Z, Content as ee, Item as se } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
import { Root as te, Slot as re } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
const oe = [
  "logos",
  // Color logos, not suitable for icon selection
  "bitcoin-icons",
  // Contains only Bitcoin-related icons, not suitable for general use
  "brandico",
  // Contains too few icons, not suitable for general use
  "bpmn",
  // Contains only BPMN icons, not suitable for general use
  "bytesize",
  // Contains only a few icons, not suitable for general use
  "catppuccin",
  // Contains colored icons
  "charm",
  // Contains only a few icons, not suitable for general use
  "codex",
  // Contains only a few icons, not suitable for general use
  "emojione",
  // Colored emojis, not suitable for general use
  "covid"
  // Colored emojis, not suitable for general use
], z = Object.entries(
  Q
).map(([o, c]) => ({
  code: o,
  ...c
})).filter(
  (o) => oe.includes(o.code) === !1 && typeof o.total == "number" && o.total > 0
).sort((o, c) => o.name.localeCompare(c.name));
function* ne(o, c) {
  for (const f of Object.values(o))
    if (Array.isArray(f))
      for (const y of f)
        yield `${c}:${y}`;
}
const ve = ({ currentValue: o, onChange: c, title: f, description: y, schema: ie, defaultCollection: k }) => {
  const [u, S] = d(!1), [j, b] = d(!1), [i, _] = d(
    k ?? z[0].code
  ), [p, $] = d({}), [n, G] = d(""), [A, x] = d([]), [m, v] = d(!1), T = P(null);
  w(() => {
    async function s() {
      if (!i)
        return {};
      b(!0);
      try {
        const r = await fetch(`https://api.iconify.design/collection?prefix=${i}`);
        if (!r.ok)
          return console.error("Failed to fetch icons for collection:", i), {};
        const t = await r.json(), a = {};
        t.categories && Object.entries(t.categories).forEach(([N, E]) => {
          Array.isArray(E) && (a[N] = E);
        }), t.uncategorized && Array.isArray(t.uncategorized) && (a.uncategorized = t.uncategorized), Object.keys(a).length === 0 && t.icons && Array.isArray(t.icons) && (a.uncategorized = t.icons), $(a);
      } catch (r) {
        console.error("Error fetching icons:", r), $({});
      } finally {
        b(!1);
      }
    }
    s();
  }, [i]), w(() => {
    if (!n.trim()) {
      x([]), v(!1);
      return;
    }
    const r = setTimeout(async () => {
      v(!0);
      try {
        const t = await fetch(
          `https://api.iconify.design/search?query=${encodeURIComponent(n)}&limit=150`
        );
        if (!t.ok) {
          console.error("Failed to search icons:", t.statusText), x([]);
          return;
        }
        const N = (await t.json()).icons ?? [];
        x(N);
      } catch (t) {
        console.error("Error searching icons:", t), x([]);
      } finally {
        v(!1);
      }
    }, 300);
    return () => clearTimeout(r);
  }, [n]);
  const l = O(() => {
    if (n.trim())
      return A;
    if (!p || Object.keys(p).length === 0 || !i)
      return [];
    const s = ne(p, i);
    return Array.from(s);
  }, [p, i, n, A]), h = 6, B = 48, I = Math.ceil(l.length / h), H = O(() => {
    const s = [];
    for (let r = 0; r < I; r++) {
      const t = r * h, a = Math.min(t + h, l.length);
      s.push(l.slice(t, a));
    }
    return s;
  }, [l, I]), g = W({
    count: I,
    enabled: u && i !== null,
    getScrollElement: () => T.current,
    estimateSize: () => B,
    overscan: 5,
    // Render 5 extra rows for smooth scrolling
    useAnimationFrameWithResizeObserver: !0
    // Use animation frame for smoother scrolling
  });
  w(() => {
    u && R(() => {
      g.measure();
    });
  }, [u, g]);
  const L = (s) => {
    c(s), S(!1);
  }, C = () => z.find((s) => s.code === i);
  return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between flex-1 gap-1", children: [
    /* @__PURE__ */ e.jsx(D, { title: f, description: y }),
    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 justify-between", children: [
      o && /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ e.jsx(F, { icon: o, className: "w-6 h-6 text-upstart-500" }) }),
      /* @__PURE__ */ e.jsxs(U, { open: u, onOpenChange: S, children: [
        /* @__PURE__ */ e.jsx(Y, { children: /* @__PURE__ */ e.jsx(K, { type: "button", variant: "soft", size: "1", radius: "full", children: "Choose icon" }) }),
        /* @__PURE__ */ e.jsx(J, { className: "w-80 p-4 bg-white border border-gray-200 rounded-lg shadow-lg", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e.jsxs("div", { children: [
            /* @__PURE__ */ e.jsxs(
              X,
              {
                name: "collection",
                defaultValue: i ?? void 0,
                onValueChange: (s) => {
                  b(!0), R(() => {
                    _(s);
                  });
                },
                children: [
                  /* @__PURE__ */ e.jsx(Z, { radius: "medium", variant: "surface", className: "!w-full capitalize" }),
                  /* @__PURE__ */ e.jsx(ee, { position: "popper", children: z.map((s) => /* @__PURE__ */ e.jsxs(se, { value: s.code, className: "capitalize", children: [
                    s.name,
                    " (",
                    s.total,
                    " icons)"
                  ] }, s.code)) })
                ]
              }
            ),
            C() && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-500 mt-1", children: C()?.author && /* @__PURE__ */ e.jsxs("span", { children: [
              "Icons by ",
              C().author.name
            ] }) })
          ] }),
          /* @__PURE__ */ e.jsx("div", { className: M("mt-6"), children: /* @__PURE__ */ e.jsx(
            te,
            {
              value: n,
              onChange: (s) => G(s.target.value),
              placeholder: "Search icons across all collections...",
              size: "2",
              variant: "surface",
              children: /* @__PURE__ */ e.jsx(re, { children: /* @__PURE__ */ e.jsx(q, { height: "16", width: "16" }) })
            }
          ) }),
          n.trim() && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-gray-500", children: m ? /* @__PURE__ */ e.jsx("span", { children: "Searching..." }) : /* @__PURE__ */ e.jsxs("span", { children: [
            l.length,
            " icons found",
            n && ` for "${n}"`
          ] }) }),
          (j || m) && /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm text-gray-500", children: m ? "Searching icons..." : "Loading icons..." }) }),
          !j && !m && l.length > 0 && /* @__PURE__ */ e.jsx(
            "div",
            {
              ref: T,
              className: M(
                "h-[320px] overflow-auto scrollbar-thin",
                V({
                  scrollbarColor: "var(--violet-4) var(--violet-1)"
                })
              ),
              children: /* @__PURE__ */ e.jsx(
                "div",
                {
                  style: {
                    height: `${g.getTotalSize()}px`,
                    width: "100%",
                    position: "relative"
                  },
                  children: g.getVirtualItems().map((s) => {
                    const r = H[s.index];
                    return r ? /* @__PURE__ */ e.jsx(
                      "div",
                      {
                        style: {
                          position: "absolute",
                          top: 0,
                          left: 0,
                          width: "100%",
                          height: `${s.size}px`,
                          transform: `translateY(${s.start}px)`
                        },
                        children: /* @__PURE__ */ e.jsxs("div", { className: "grid grid-cols-6 gap-2 px-1 py-2", children: [
                          r.map((t) => /* @__PURE__ */ e.jsx(
                            "button",
                            {
                              type: "button",
                              onClick: () => L(t),
                              className: `p-2 rounded hover:bg-upstart-100 flex items-center justify-center transition-colors ${o === t ? "bg-upstart-100 border border-upstart-500" : "border border-transparent"}`,
                              children: /* @__PURE__ */ e.jsx(F, { icon: t, className: "w-5 h-5" })
                            },
                            t
                          )),
                          r.length < h && Array.from({ length: h - r.length }).map((t, a) => /* @__PURE__ */ e.jsx("div", { className: "p-2" }, `empty-${a}`))
                        ] })
                      },
                      s.index
                    ) : null;
                  })
                }
              )
            }
          ),
          !j && !m && l.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "text-center text-gray-500 text-sm py-4", children: n.trim() ? `No icons found for "${n}"` : "No icons found in this collection" })
        ] }) })
      ] })
    ] })
  ] });
};
export {
  ve as default
};
//# sourceMappingURL=iconify.js.map
