"use client";
import { jsxs as r, 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/index.js";
import { useState as y, useRef as C, useEffect as k } from "react";
import "../../contexts/action-context.js";
import { getCurrentBreakpoint as $ } from "../../../../../store/selectors.js";
import { useAppSelector as O } from "../../hooks/use-app-selector.js";
import { FiX as P } 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 "../../licensing/index.js";
import "../shared/accordion.js";
import { ScrollArea as R } from "../shared/scroll-area.js";
import "../../store/app-slice.js";
import { BsTrash as z } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import "../shared/popover.js";
import "../../store/theme-slice.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-hot-toast/dist/index.js";
import { useSettings as L } from "../../hooks/use-settings.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/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/index2.js";
import "../../../../../_virtual/cjs.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/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 { useIcons as H } from "../../hooks/use-icons.js";
import { Root as _, Trigger as q, Portal as G, Overlay as J, Content as K, Title as Q, Close as U, Description as W } 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 Y, List as Z, Trigger as ee, Content as te } 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 "../base/add-new-section.js";
import "../base/editor-render-block.js";
import "react-dom";
import "../base/editor-asset-manager.js";
import "../base/render-block.js";
import "../base/asset-manager.js";
import "../base/block-toolbar.js";
const Pt = ({
  label: p = "Select Icon",
  fieldName: n,
  mode: c,
  responsive: d,
  type: g,
  className: w
}) => {
  var N;
  const m = D, a = O($), [t, f] = L(
    d && c ? `${n}.${a}.${c}` : d ? `${n}.${a}` : c ? `${n}.${c}` : n,
    g
  ), [b, l] = y(!1), [h, S] = y((t == null ? void 0 : t.iconName) ?? ""), [u, x] = y(
    (t == null ? void 0 : t.iconSet) ?? ((N = m[0]) == null ? void 0 : N.value) ?? ""
  ), v = () => t != null && t.iconSet && t.iconName ? /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ r("div", { className: "text-center", children: [
    /* @__PURE__ */ e("div", { className: "mb-1 text-2xl", children: /* @__PURE__ */ e(T, { iconSet: t.iconSet, iconName: t.iconName, size: "2em" }) }),
    /* @__PURE__ */ r("div", { className: "text-xs text-slate-600", children: [
      t.iconSet,
      ":",
      t.iconName
    ] })
  ] }) }) : null;
  return /* @__PURE__ */ r("div", { className: I("mt-4", w), children: [
    p && /* @__PURE__ */ r(B, { className: "mb-1.5 flex flex-1 items-center gap-1", children: [
      p,
      " ",
      d && /* @__PURE__ */ e(M, {})
    ] }),
    /* @__PURE__ */ r(_, { open: b, onOpenChange: l, children: [
      /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ r("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-slate-600", children: t ? v() : /* @__PURE__ */ e(X, {}) }),
        /* @__PURE__ */ r("div", { className: "absolute -bottom-full z-10 flex w-full justify-between bg-slate-700 p-1 text-center text-xs text-slate-50 transition-all duration-200 group-hover:bottom-0", children: [
          /* @__PURE__ */ e("span", { children: "Icon Library" }),
          t && /* @__PURE__ */ e(
            "button",
            {
              onClick: (o) => {
                o.stopPropagation(), f(void 0);
              },
              className: "p-0.5",
              children: /* @__PURE__ */ e(z, { className: "hover:text-danger-500" })
            }
          )
        ] })
      ] }) }),
      /* @__PURE__ */ r(G, { children: [
        /* @__PURE__ */ e(J, { className: "data-[state=open]:animate-overlay-show fixed inset-0 z-50 bg-[rgba(0,0,0,0.7)]" }),
        /* @__PURE__ */ r(K, { 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__ */ r(Q, { className: "flex justify-between border-b p-4", children: [
            /* @__PURE__ */ e("p", { className: "text-xl font-semibold text-slate-800", children: "Insert Icon" }),
            /* @__PURE__ */ e(U, { className: "cursor-pointer", children: /* @__PURE__ */ e(P, {}) })
          ] }),
          /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "flex h-[450px]", children: /* @__PURE__ */ e(
              oe,
              {
                selectedIcon: h,
                setSelectedIcon: S,
                iconCollections: m,
                selectedCollection: u,
                setSelectedCollection: x
              }
            ) }),
            /* @__PURE__ */ r("div", { className: " flex justify-end gap-2 border-t border-slate-300 p-4", children: [
              /* @__PURE__ */ e(j, { onClick: () => l(!1), variant: "secondary", children: "Cancel" }),
              /* @__PURE__ */ e(
                j,
                {
                  onClick: () => {
                    l(!1), f({
                      ...t,
                      iconSet: u,
                      iconName: h
                    });
                  },
                  disabled: !h,
                  children: "Select"
                }
              )
            ] })
          ] }) })
        ] })
      ] })
    ] })
  ] });
};
function oe({
  iconCollections: p,
  selectedCollection: n,
  setSelectedCollection: c,
  selectedIcon: d,
  setSelectedIcon: g
}) {
  const w = C(null), m = C(null), a = C(null), [t, f] = y(""), b = re(t, 500), {
    data: l,
    isLoading: h,
    isError: S,
    fetchNextPage: u,
    hasNextPage: x,
    isFetchingNextPage: v
  } = H({
    collection: n,
    pageSize: 36,
    searchText: b
  }), N = (o) => {
    c(o), g(""), f(""), m.current && m.current.scrollTo({ top: 0, behavior: "smooth" });
  };
  return k(() => {
    const o = new IntersectionObserver(
      (i) => {
        var s;
        (s = i[0]) != null && s.isIntersecting && x && !v && 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,
    v,
    n,
    b
    // Use debounced search text instead of raw search text
  ]), /* @__PURE__ */ r(
    Y,
    {
      value: n,
      onValueChange: N,
      className: "flex h-full w-full",
      children: [
        /* @__PURE__ */ e(Z, { className: "flex w-[200px] flex-col overflow-y-auto border-r", children: p.map((o) => /* @__PURE__ */ e(
          ee,
          {
            value: o.value,
            className: "border-l-2 border-transparent px-4 py-3 text-left text-sm font-medium text-slate-800 transition-colors  hover:bg-slate-100 data-[state=active]:border-slate-600 data-[state=active]:bg-slate-100",
            children: o.name
          },
          o.value
        )) }),
        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: p.map((o) => /* @__PURE__ */ e(te, { value: o.value, className: "h-full", children: /* @__PURE__ */ r("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: t,
              onChange: (i) => f(i.target.value)
            }
          ) }),
          /* @__PURE__ */ e(R, { className: "flex-1", children: /* @__PURE__ */ r("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((s) => /* @__PURE__ */ r(
                    "div",
                    {
                      className: I(
                        "cursor-pointer rounded border border-slate-300 p-4 text-center transition-colors",
                        d === s ? "bg-slate-100 ring-2 ring-slate-600" : "hover:bg-slate-100"
                      ),
                      onClick: () => g(s),
                      children: [
                        /* @__PURE__ */ e(
                          T,
                          {
                            iconSet: o.value,
                            iconName: s,
                            size: "1.5rem",
                            className: "text-slate-800"
                          }
                        ),
                        /* @__PURE__ */ e("div", { className: "mt-1 text-xs text-slate-600", children: s })
                      ]
                    },
                    s
                  ))
                ) : S ? /* @__PURE__ */ r("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-slate-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, s) => /* @__PURE__ */ r(
                  "div",
                  {
                    className: "flex h-20 cursor-pointer flex-col items-center justify-center rounded border border-slate-300 transition-colors",
                    children: [
                      /* @__PURE__ */ e("div", { className: "h-[1.5rem] w-[1.5rem] animate-pulse rounded bg-slate-300" }),
                      /* @__PURE__ */ e("div", { className: "mt-2 w-16 text-center text-xs  text-slate-600", children: "Loading..." })
                    ]
                  },
                  s
                )) : /* @__PURE__ */ r("div", { className: "col-span-full flex h-[350px] flex-col items-center justify-center py-10 text-slate-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: v && /* @__PURE__ */ e(F, { className: "animate-spin text-2xl text-slate-600" }) })
          ] }) })
        ] }) }, o.value)) })
      ]
    }
  );
}
export {
  Pt as IconControl,
  oe as IconSetViewer
};
//# sourceMappingURL=icon.control.js.map
