"use client";
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import "../../config/theme.config.js";
import "../../config/builder.config.js";
import "../../store/builder-slice.js";
import { classNames as I } from "../../../../../utils.js";
import { useState as N, useRef as C, useEffect as k } from "react";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { useAppSelector as O } from "../../hooks/use-app-selector.js";
import { useSettings as P } from "../../hooks/use-settings.js";
import "../../store/theme-slice.js";
import "../../../../../_virtual/cjs.js";
import "../../contexts/action-context.js";
import { FiX as R } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import "../base/editor/block-control-panel.js";
import "../base/editor/block-navigation.js";
import { ScrollArea as z } from "../shared/scroll-area.js";
import { BsTrash as L } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/alpha/Alpha.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/block/Block.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/circle/Circle.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/chrome/Chrome.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/compact/Compact.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/github/Github.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/hue/Hue.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/material/Material.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/photoshop/Photoshop.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/sketch/Sketch.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/slider/Slider.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/swatches/Swatches.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/twitter/Twitter.js";
import "../../../../../node_modules/.pnpm/react-color@2.19.3_react@19.0.0/node_modules/react-color/es/components/google/Google.js";
import "../../../../../node_modules/.pnpm/tinycolor2@1.6.0/node_modules/tinycolor2/esm/tinycolor.js";
import { Label as B } from "../shared/label.js";
import "../shared/popover.js";
import "../shared/tooltip.js";
import "../shared/select.js";
import { BreakpointSelector as M } from "../shared/breakpoint-selector.js";
import "./slider-unit.control.js";
import "./toggle-group.control.js";
import { Input as A } from "../shared/input.js";
import "../shared/range-slider.js";
import "../../../../../_virtual/index5.js";
import "../../../../../_virtual/lodash.js";
import { LuSearchX as E } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { Button as j } from "../shared/button.js";
import "../shared/accordion.js";
import "../shared/tabs.js";
import "../shared/content-editable.js";
import "./spacing.control.js";
import "../shared/separator.js";
import "../../../../../node_modules/.pnpm/@monaco-editor_react@4.7.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@monaco-editor/react/dist/index.js";
import "./flex-gap.control.js";
import "../shared/checkbox.js";
import "../shared/context-menu.js";
import "../shared/dialog.js";
import "../shared/drawer.js";
import "../../contexts/frame-context.js";
import "../shared/hover-card.js";
import { RenderIcon as T } from "../shared/render-icon.js";
import "../shared/switch.js";
import "../../../../../node_modules/.pnpm/@tiptap_extension-link@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-link/dist/index.js";
import "../../../../../node_modules/.pnpm/@tiptap_extension-placeholder@2.23.0_@tiptap_core@2.23.0_@tiptap_pm@2.23.0__@tiptap_pm@2.23.0/node_modules/@tiptap/extension-placeholder/dist/index.js";
import "../../../../../node_modules/.pnpm/@tiptap_starter-kit@2.23.0/node_modules/@tiptap/starter-kit/dist/index.js";
import "../shared/textarea.js";
import { MdErrorOutline as V } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { CgSpinner as F } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/cg/index.js";
import { HiPlusCircle as X } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { collections as D } from "../../config/icon.config.js";
import { Root as H, Trigger as _, Portal as q, Overlay as G, Content as J, Title as K, Close as Q, Description as U } from "../../../../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.6_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0._hjv5xdlxm3zsqf3yg6gf36cppa/node_modules/@radix-ui/react-dialog/dist/index.js";
import { Root as W, List as Y, Trigger as Z, Content as ee } from "../../../../../node_modules/.pnpm/@radix-ui_react-tabs@1.1.3_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0.10_zw2jd7lnncg2lbtqb4feedrihy/node_modules/@radix-ui/react-tabs/dist/index.js";
import re from "../../hooks/use-debounce.js";
import { useIcons as te } from "../../hooks/use-icons.js";
import "../base/add-new-section.js";
import "../base/editor-render-block.js";
import "react-dom";
import "../base/editor-asset-manager.js";
import "../base/editor/block-navigation-item.js";
import "../base/render-block.js";
import "../base/asset-manager.js";
import "../base/block-toolbar.js";
const Or = ({
  label: p = "Select Icon",
  fieldName: s,
  mode: c,
  responsive: d,
  type: v,
  className: w
}) => {
  var y;
  const m = D, a = O($), [r, f] = P(
    d && c ? `${s}.${a}.${c}` : d ? `${s}.${a}` : c ? `${s}.${c}` : s,
    v
  ), [b, l] = N(!1), [h, S] = N((r == null ? void 0 : r.iconName) ?? ""), [u, x] = N(
    (r == null ? void 0 : r.iconSet) ?? ((y = m[0]) == null ? void 0 : y.value) ?? ""
  ), g = () => r != null && r.iconSet && r.iconName ? /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ t("div", { className: "text-center", children: [
    /* @__PURE__ */ e("div", { className: "mb-1 text-2xl", children: /* @__PURE__ */ e(T, { iconSet: r.iconSet, iconName: r.iconName, size: "2em" }) }),
    /* @__PURE__ */ t("div", { className: "text-xs text-gray-600", children: [
      r.iconSet,
      ":",
      r.iconName
    ] })
  ] }) }) : null;
  return /* @__PURE__ */ t("div", { className: I("mt-4", w), children: [
    p && /* @__PURE__ */ t(B, { className: "mb-1.5 flex flex-1 items-center gap-1", children: [
      p,
      " ",
      d && /* @__PURE__ */ e(M, {})
    ] }),
    /* @__PURE__ */ t(H, { open: b, onOpenChange: l, children: [
      /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "control-media-area group  relative h-32 w-full cursor-pointer overflow-hidden  p-0 transition duration-200", children: [
        /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-2xl text-gray-600", children: r ? g() : /* @__PURE__ */ e(X, {}) }),
        /* @__PURE__ */ t("div", { className: "absolute -bottom-full z-10 flex w-full justify-between bg-gray-700 p-1 text-center text-xs text-gray-50 transition-all duration-200 group-hover:bottom-0", children: [
          /* @__PURE__ */ e("span", { children: "Icon Library" }),
          r && /* @__PURE__ */ e(
            "button",
            {
              onClick: (o) => {
                o.stopPropagation(), f(void 0);
              },
              className: "p-0.5",
              children: /* @__PURE__ */ e(L, { className: "hover:text-danger-500" })
            }
          )
        ] })
      ] }) }),
      /* @__PURE__ */ t(q, { children: [
        /* @__PURE__ */ e(G, { className: "data-[state=open]:animate-overlay-show fixed inset-0 z-50 bg-[rgba(0,0,0,0.7)]" }),
        /* @__PURE__ */ t(J, { className: "z-60 focus:outline-hidden data-[state=open]:animate-content-show fixed left-[50%] top-[50%] w-full max-w-5xl translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white", children: [
          /* @__PURE__ */ t(K, { className: "flex justify-between border-b p-4", children: [
            /* @__PURE__ */ e("p", { className: "text-xl font-semibold text-gray-800", children: "Insert Icon" }),
            /* @__PURE__ */ e(Q, { className: "cursor-pointer", children: /* @__PURE__ */ e(R, {}) })
          ] }),
          /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "flex h-[450px]", children: /* @__PURE__ */ e(
              oe,
              {
                selectedIcon: h,
                setSelectedIcon: S,
                iconCollections: m,
                selectedCollection: u,
                setSelectedCollection: x
              }
            ) }),
            /* @__PURE__ */ t("div", { className: " flex justify-end gap-2 border-t border-gray-300 p-4", children: [
              /* @__PURE__ */ e(j, { onClick: () => l(!1), variant: "secondary", children: "Cancel" }),
              /* @__PURE__ */ e(
                j,
                {
                  onClick: () => {
                    l(!1), f({
                      ...r,
                      iconSet: u,
                      iconName: h
                    });
                  },
                  disabled: !h,
                  children: "Select"
                }
              )
            ] })
          ] }) })
        ] })
      ] })
    ] })
  ] });
};
function oe({
  iconCollections: p,
  selectedCollection: s,
  setSelectedCollection: c,
  selectedIcon: d,
  setSelectedIcon: v
}) {
  const w = C(null), m = C(null), a = C(null), [r, f] = N(""), b = re(r, 500), {
    data: l,
    isLoading: h,
    isError: S,
    fetchNextPage: u,
    hasNextPage: x,
    isFetchingNextPage: g
  } = te({
    collection: s,
    pageSize: 36,
    searchText: b
  }), y = (o) => {
    c(o), v(""), f(""), m.current && m.current.scrollTo({ top: 0, behavior: "smooth" });
  };
  return k(() => {
    const o = new IntersectionObserver(
      (i) => {
        var n;
        (n = i[0]) != null && n.isIntersecting && x && !g && u();
      },
      {
        root: null,
        // Use the viewport as the root
        rootMargin: "100px",
        // Start loading a bit before the element is visible
        threshold: 0.1
        // Trigger when at least 10% of the element is visible
      }
    );
    return a.current && o.observe(a.current), () => {
      a.current && o.unobserve(a.current);
    };
  }, [
    u,
    x,
    g,
    s,
    b
    // Use debounced search text instead of raw search text
  ]), /* @__PURE__ */ t(
    W,
    {
      value: s,
      onValueChange: y,
      className: "flex h-full w-full",
      children: [
        /* @__PURE__ */ e(Y, { className: "flex w-[200px] flex-col overflow-y-auto border-r", children: p.map((o) => /* @__PURE__ */ e(
          Z,
          {
            value: o.value,
            className: "border-l-2 border-transparent px-4 py-3 text-left text-sm font-medium text-gray-800 transition-colors  hover:bg-gray-100 data-[state=active]:border-gray-600 data-[state=active]:bg-gray-100",
            children: o.name
          },
          o.value
        )) }),
        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: p.map((o) => /* @__PURE__ */ e(ee, { value: o.value, className: "h-full", children: /* @__PURE__ */ t("div", { className: "flex h-full flex-col", children: [
          /* @__PURE__ */ e("div", { className: "flex justify-end px-5 py-3", children: /* @__PURE__ */ e(
            A,
            {
              placeholder: "Search...",
              className: "w-[200px]",
              value: r,
              onChange: (i) => f(i.target.value)
            }
          ) }),
          /* @__PURE__ */ e(z, { className: "flex-1", children: /* @__PURE__ */ t("div", { ref: m, children: [
            /* @__PURE__ */ e(
              "div",
              {
                ref: w,
                className: "grid grid-cols-4 gap-4 px-4 py-2 sm:grid-cols-4 lg:grid-cols-6",
                children: l != null && l.pages && l.pages.length > 0 && l.pages.some((i) => Object.keys((i == null ? void 0 : i.icons) ?? {}).length > 0) ? l.pages.flatMap(
                  (i) => Object.keys((i == null ? void 0 : i.icons) ?? {}).map((n) => /* @__PURE__ */ t(
                    "div",
                    {
                      className: I(
                        "cursor-pointer rounded border border-gray-300 p-4 text-center transition-colors",
                        d === n ? "bg-gray-100 ring-2 ring-gray-600" : "hover:bg-gray-100"
                      ),
                      onClick: () => v(n),
                      children: [
                        /* @__PURE__ */ e(
                          T,
                          {
                            iconSet: o.value,
                            iconName: n,
                            size: "1.5rem",
                            className: "text-gray-800"
                          }
                        ),
                        /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-gray-600", children: n })
                      ]
                    },
                    n
                  ))
                ) : S ? /* @__PURE__ */ t("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-gray-500", children: [
                  /* @__PURE__ */ e(V, { className: "mb-2 h-12 w-12" }),
                  /* @__PURE__ */ e("div", { className: "mb-1 text-lg font-semibold", children: "Something went wrong" }),
                  /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again or select a different icon set" })
                ] }) : h ? Array.from({ length: 36 }).fill(null).map((i, n) => /* @__PURE__ */ t(
                  "div",
                  {
                    className: "flex h-20 cursor-pointer flex-col items-center justify-center rounded border border-gray-300 transition-colors",
                    children: [
                      /* @__PURE__ */ e("div", { className: "h-[1.5rem] w-[1.5rem] animate-pulse rounded bg-gray-300" }),
                      /* @__PURE__ */ e("div", { className: "mt-2 w-16 text-center text-xs  text-gray-600", children: "Loading..." })
                    ]
                  },
                  n
                )) : /* @__PURE__ */ t("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-gray-500", children: [
                  /* @__PURE__ */ e(E, { className: "mb-2 h-12 w-12" }),
                  /* @__PURE__ */ e("div", { className: "mb-1 text-lg font-semibold", children: "No icons found" }),
                  /* @__PURE__ */ e("div", { className: "text-sm", children: "Try a different search or icon set." })
                ] })
              }
            ),
            x && /* @__PURE__ */ e("div", { ref: a, className: "mb-2 mt-4 flex h-10 justify-center", children: g && /* @__PURE__ */ e(F, { className: "animate-spin text-2xl text-gray-600" }) })
          ] }) })
        ] }) }, o.value)) })
      ]
    }
  );
}
export {
  Or as IconControl,
  oe as IconSetViewer
};
//# sourceMappingURL=icon.control.js.map
