import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { a as fe, b as ne } from "../../../../sdk/dist/shared/chunk-PSCN3VVA.js";
import "../../../../sdk/dist/shared/chunk-R6ATC4TC.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-CFF6Q7O7.js";
import "../../../../sdk/dist/shared/chunk-IKC3FK7L.js";
import "../../../../sdk/dist/shared/chunk-E6XEI7IK.js";
import "../../../../sdk/dist/shared/chunk-SQ5T4AT5.js";
import "../../../../sdk/dist/shared/chunk-G5CJU6RD.js";
import "../../../../sdk/dist/shared/chunk-PSTFJ5IJ.js";
import "../../../../sdk/dist/shared/chunk-NJGXC7D6.js";
import "../../../../sdk/dist/shared/chunk-SXHDQ64Z.js";
import "../../../../sdk/dist/shared/chunk-QX6OGRRT.js";
import "../../../../sdk/dist/shared/chunk-FLOMNC6J.js";
import "../../../../sdk/dist/shared/chunk-PLSV746R.js";
import "../../../../sdk/dist/shared/chunk-WBZW5LVH.js";
import "../../../../sdk/dist/shared/chunk-WYVJE6J5.js";
import "../../../../sdk/dist/shared/chunk-I3VL6SRH.js";
import "../../../../sdk/dist/shared/chunk-B3EATRFX.js";
import "../../../../sdk/dist/shared/chunk-IKHZD2JH.js";
import "../../../../sdk/dist/shared/chunk-PXI7AHWS.js";
import "../../../../sdk/dist/shared/chunk-SY6DZLTC.js";
import "../../../../sdk/dist/shared/chunk-7A2JNQX3.js";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { useState, useMemo, useEffect } from "react";
import { useEditorHelpers } from "../../../../../use-editor.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { PanelBlockTitle } from "./PanelBlockTitle.js";
import { IconRender } from "./IconRender.js";
import { nanoid } from "../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { l as X } from "../../../../sdk/dist/shared/chunk-GOMXZC4B.js";
import "lodash-es";
import { useSortable } from "../../../../../node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/react/sortable.js";
const brickCategories = {
  basic: "Basic elements",
  widgets: "Widgets",
  media: "Media",
  container: "Containers & utilities"
  // layout: "Layout",
};
function PanelLibrary() {
  const { setMouseOverPanel } = useEditorHelpers();
  const [currentManifest, setCurrentManifest] = useState(null);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      onMouseEnter: () => setMouseOverPanel(true),
      onMouseLeave: () => setMouseOverPanel(false),
      className: "flex flex-col h-full",
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBlockTitle, { children: "Library" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 flex-1", children: Object.entries(brickCategories).map(([category, title]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs font-bold uppercase text-gray-600 bg-upstart-50 px-3 py-2", children: title }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: D("grid gap-1.5 mx-2"),
              style: {
                gridTemplateColumns: "repeat(auto-fill, minmax(66px, 1fr))"
              },
              children: Object.values(fe).filter((m) => m.category === category && !m.hideInLibrary).filter((m) => !m.inlineDragDisabled).map((brickImport, index) => {
                return /* @__PURE__ */ jsxRuntimeExports.jsx(
                  DraggableBrick,
                  {
                    defaults: ne[brickImport.type],
                    index,
                    onMouseOver: (e) => {
                      setCurrentManifest(brickImport);
                    },
                    onMouseLeave: () => setCurrentManifest(null)
                  },
                  brickImport.type
                );
              })
            }
          )
        ] }, category)) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "mt-auto p-2 bg-upstart-50 font-normal text-upstart-700 text-xs rounded transition-opacity",
              currentManifest ? "opacity-100" : "opacity-0"
            ),
            children: currentManifest?.description
          }
        )
      ]
    }
  );
}
function DraggableBrick(props) {
  const {
    defaults: { manifest },
    index,
    ...rest
  } = props;
  const [random, setRandom] = useState(nanoid());
  const brickTemplate = useMemo(() => X(manifest.type), [random]);
  const draggable = useSortable({
    // const draggable = useDraggable({
    id: brickTemplate.id,
    type: "library",
    data: { manifest, brick: brickTemplate, fromLibrary: true },
    feedback: "clone",
    index: 0
  });
  useEffect(() => {
    if (!draggable.isDragging) {
      setRandom(nanoid());
    }
  }, [draggable.isDragging]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      "data-brick-template-type": brickTemplate.type,
      "data-brick-min-w": manifest.minWidth?.desktop,
      "data-brick-min-h": manifest.minHeight?.desktop,
      "data-brick-default-w": manifest.defaultWidth?.desktop,
      "data-brick-default-h": manifest.defaultHeight?.desktop,
      ref: draggable.ref,
      ...rest,
      className: D(
        `rounded border border-upstart-100 hover:border-upstart-600 hover:bg-upstart-50 bg-white dark:bg-dark-700 !cursor-grab
        active:!cursor-grabbing touch-none select-none pointer-events-auto draggable-brick group aspect-square
        z-[99999] flex flex-col items-center justify-center`,
        draggable.isDragging && "shadow-2xl border-upstart-600 scale-110"
      ),
      ...props,
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "div",
        {
          className: D(
            "flex-1 flex flex-col justify-center text-upstart-700 dark:text-upstart-400 items-center gap-1 rounded-[inherit]"
          ),
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(IconRender, { manifest }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: D("text-center text-xs"), children: manifest.name })
          ]
        }
      )
    }
  );
}
export {
  PanelLibrary as default
};
//# sourceMappingURL=PanelLibrary.js.map
