import { j as e } from "./_virtual/jsx-runtime.js";
import { useEditorEnabled as H, useChatVisible as U, usePanel as $, useEditorHelpers as J, useSelectedBrickId as M, useSelectedSectionId as W, useDebugMode as q } from "./use-editor.js";
import { lazy as l, useRef as D, useEffect as F, Suspense as f } from "react";
import { tw as G, css as v, tx as b } from "./packages/style-system/dist/twind.js";
import "./node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import { Toaster as K } from "./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 { usePageAutoSave as V } from "./packages/components/src/editor/hooks/use-page-autosave.js";
import { getThemeCss as X } from "./get-theme-css.js";
import { useEditorHotKeys as Y } from "./packages/components/src/editor/hooks/use-editor-hot-keys.js";
import Q from "./packages/components/src/editor/components/ThemesPreviewList.js";
import Z from "./packages/components/src/editor/components/BlankWaitPage.js";
import { l as _ } from "./packages/sdk/dist/shared/chunk-ML4JSDQM.js";
import "@sinclair/typebox";
import "./packages/sdk/dist/shared/chunk-5DZIQGY2.js";
import "./packages/sdk/dist/shared/chunk-VDX2J22H.js";
import "./packages/sdk/dist/shared/chunk-URRCKLAS.js";
import "./packages/sdk/dist/shared/chunk-2NLDX5FG.js";
import "./packages/sdk/dist/shared/chunk-XED6ARVN.js";
import "./packages/sdk/dist/shared/chunk-3QOAHMV4.js";
import "./packages/sdk/dist/shared/chunk-EVDZ2KND.js";
import "./packages/sdk/dist/shared/chunk-3P36LG6T.js";
import "./packages/sdk/dist/shared/chunk-ARYG4XMX.js";
import "./packages/sdk/dist/shared/chunk-QGFQA7OZ.js";
import "./packages/sdk/dist/shared/chunk-5X5SX5N7.js";
import "./packages/sdk/dist/shared/chunk-6R76KIHZ.js";
import "./packages/sdk/dist/shared/chunk-K5ADUHF4.js";
import "./packages/sdk/dist/shared/chunk-Y3X4F4YJ.js";
import "./packages/sdk/dist/shared/chunk-LT4CW2F7.js";
import "./packages/sdk/dist/shared/chunk-ILIWVWHC.js";
import "./packages/sdk/dist/shared/chunk-SAJY7H6N.js";
import "./packages/sdk/dist/shared/chunk-STDCM2KD.js";
import "./packages/sdk/dist/shared/chunk-TH5SONR6.js";
import { isEqual as B } from "lodash-es";
import "./packages/sdk/dist/shared/chunk-UDQWYGSO.js";
import "./packages/sdk/dist/shared/chunk-AZHH3XJJ.js";
import "./packages/sdk/dist/shared/chunk-6PGAWO4H.js";
import "./packages/sdk/dist/shared/chunk-F4JNKU7J.js";
import "./packages/sdk/dist/shared/chunk-7UBMXMNJ.js";
import "./packages/sdk/dist/shared/chunk-JRCVYDCD.js";
import { useIsLocalDev as ee } from "./packages/components/src/editor/hooks/use-is-local-dev.js";
import { useDraft as re, useSections as te, useThemes as oe, useGenerationState as se, useDraftHelpers as E } from "./use-page-data.js";
import { DragDropProvider as ie } from "./node_modules/.pnpm/@dnd-kit_react@0.1.21_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_d5e73c0d556c94305a83c95cc0a8798b/node_modules/@dnd-kit/react/index.js";
import { move as ae } from "./node_modules/.pnpm/@dnd-kit_helpers@0.1.21/node_modules/@dnd-kit/helpers/dist/index.js";
import ne from "./packages/components/src/editor/components/Modal.js";
import le from "./packages/components/src/editor/hooks/use-beforeunload.js";
import { useUserConfig as ce } from "./packages/components/src/editor/hooks/use-user-config.js";
import { Switch as de } 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/switch.js";
import { Button as C } 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";
const me = l(() => import("./packages/components/src/editor/components/Tour.js")), pe = l(() => import("./packages/components/src/editor/components/NavBar.js")), fe = l(() => import("./packages/components/src/editor/components/Chat.js")), ue = l(() => import("./packages/components/src/editor/components/EditablePage.js"));
l(() => import("./Page.js"));
const w = l(() => import("./packages/components/src/editor/components/DeviceFrame.js")), ge = l(() => import("./packages/components/src/editor/components/Panel.js"));
function fr(c) {
  const u = D(null), i = re();
  H();
  const S = U(), y = te(), { panelPosition: T } = $(), N = oe(), a = se(), d = E(), { setDraggingBrickType: P, toggleDebugMode: R, hidePanel: be } = J(), I = M(), z = W(), A = ee(), g = q(), O = ce(), m = D(null);
  return V(), Y(), le(() => !!i.dirty, "You have unsaved changes. Are you sure you want to leave?"), F(() => {
    const o = i.previewTheme ?? i.site.theme;
    o && G(v(X(o)));
  }, [i.previewTheme, i.site.theme]), /* @__PURE__ */ e.jsx(
    ie,
    {
      onDragStart: (o, x) => {
        const { operation: r } = o;
        if (r.source?.type === "library") {
          const t = r.source.data.manifest.type;
          P(t);
          return;
        }
        if (console.log(`Started dragging ${r.source?.id}`), r.source?.id) {
          const t = document.getElementById(r.source.id);
          if (!t)
            return;
          console.log(`adding class ${r.source.id}`), t?.classList.add("moving"), t.style.setProperty("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.2)", "important"), t.style.setProperty("outline", "2px solid var(--violet-8)", "important"), t.style.setProperty("outline-offset", "0px", "important"), window.getComputedStyle(t).getPropertyValue("background-color") === "rgba(0, 0, 0, 0)" && (console.log("Changing background color to upstart-200"), t.style.setProperty("background-color", "var(--violet-a5)", "important"));
        }
      },
      onDragOver: (o, x) => {
        const { operation: r } = o, t = r.source?.type === "library";
        if (r.canceled || !r.target)
          return;
        if (r.target?.data?.manifest?.isContainer && r.activatorEvent?.metaKey) {
          console.log("operation.activatorEvent", r.activatorEvent), console.error("Dropping over a container, disable reordering"), o.preventDefault();
          return;
        }
        const p = y.reduce(
          (s, h) => (s[h.id] = h.bricks.filter((n) => !d.getParentBrick(n.id)).map((n) => n.id), s),
          {}
        );
        t && (p.$library$ = m.current ? [] : [r.source.id]);
        const j = ae(p, o);
        if (B(p, j))
          console.debug("Items are equal, no changes made");
        else
          for (const s of y)
            if (!B(p[s.id], j[s.id])) {
              console.log("Rebuilding section", s.id);
              const h = {
                ...s,
                bricks: j[s.id].map((n, L) => {
                  if (t && n === r.source.id && !d.getBrick(n)) {
                    const k = _(r.source.data?.manifest.type, !0);
                    return m.current = k.id, d.addBrick(k, s.id, L, null), k;
                  }
                  return d.getBrick(n);
                })
              };
              d.updateSection(s.id, h);
            }
      },
      onDragEnd: (o) => {
        console.log("Ended dragging", o);
        const {
          operation: { source: x }
        } = o;
        m.current && d.updateBrickProps(m.current, { ghost: !1 }), P(null), m.current = null, x?.id && setTimeout(() => {
          const r = document.getElementById(x.id);
          r && (r.classList.remove("moving"), r.style.removeProperty("box-shadow"), r.style.removeProperty("outline"), r.style.removeProperty("outline-offset"), r.style.removeProperty("background-color"));
        }, 200);
      },
      children: /* @__PURE__ */ e.jsxs(
        "div",
        {
          id: "editor",
          className: b(
            "grid relative transition-all mx-auto w-full",
            xe(a, S),
            "h-[100dvh] min-h-[100dvh] max-h-[100dvh]",
            a.isReady === !1 && v({
              background: `linear-gradient(120deg,
              oklab(from #9291e7 l a b / 0.65),
              oklab(from #7270c6 l a b / 0.65),
              oklab(from #c050c2 l a b / 0.65),
              oklab(from #ef50a2 l a b / 0.65),
              oklab(from #ff6285 l a b / 0.65),
              oklab(from #ff806b l a b / 0.65),
              oklab(from #ffa25a l a b / 0.65),
              oklab(from #ffc358 l a b / 0.65)
          )`
            }),
            a.isReady === !1 && "transition-all duration-500 ease-in-out"
          ),
          ...c,
          ref: u,
          children: [
            y.length > 0 && a.isReady && /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx(me, {}) }),
            /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx(pe, {}) }),
            S && /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx(fe, {}) }),
            /* @__PURE__ */ e.jsxs(f, { children: [
              /* @__PURE__ */ e.jsx(ne, {}),
              /* @__PURE__ */ e.jsx(ge, {}),
              !a.isReady && g === !0 && /* @__PURE__ */ e.jsxs("div", { className: "fixed flex flex-col gap-3 w-[23dvw] top-[60px] right-0 bottom-0 bg-gray-100 dark:bg-dark-800 border-gray-300 dark:border-gray-700 p-5 overflow-y-auto", children: [
                /* @__PURE__ */ e.jsx("h2", { className: "text-xl font-bold", children: "Debug Information" }),
                /* @__PURE__ */ e.jsx("h4", { className: "text-lg font-semibold", children: "Site" }),
                /* @__PURE__ */ e.jsx("pre", { className: "whitespace-pre-wrap break-words text-[75%]", children: JSON.stringify(i.site, null, 2) }),
                /* @__PURE__ */ e.jsx("h4", { className: "text-lg font-semibold", children: "Page" }),
                /* @__PURE__ */ e.jsx("pre", { className: "whitespace-pre-wrap break-words text-[75%]", children: JSON.stringify(i.page, null, 2) }),
                /* @__PURE__ */ e.jsx("h4", { className: "text-lg font-semibold", children: "User config" }),
                /* @__PURE__ */ e.jsx("pre", { className: "whitespace-pre-wrap break-words text-[75%]", children: JSON.stringify(O, null, 2) })
              ] })
            ] }),
            /* @__PURE__ */ e.jsxs(
              "main",
              {
                className: b(
                  "flex-1 flex place-content-center z-40 overflow-x-auto overscroll-none",
                  a.isReady === !1 && "!hidden",
                  v({
                    gridArea: "main",
                    scrollbarColor: "var(--violet-4) var(--violet-2)",
                    scrollBehavior: "smooth",
                    scrollbarGutter: "stable",
                    scrollbarWidth: T === "left" ? "thin" : "none",
                    "&:hover": {
                      scrollbarColor: "var(--violet-7) var(--violet-3)"
                    }
                  })
                ),
                children: [
                  a.isReady && /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsxs(w, { children: [
                    /* @__PURE__ */ e.jsx(ue, {}),
                    i.previewTheme && /* @__PURE__ */ e.jsx(he, {})
                  ] }) }),
                  !a.isReady && (N.length > 0 ? /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsx(Q, { themes: N }) }) : /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsx(Z, {}) })),
                  /* @__PURE__ */ e.jsx(
                    K,
                    {
                      toastOptions: {
                        position: "bottom-center",
                        style: {
                          background: "rgba(0, 0, 0, 0.85)",
                          color: "white",
                          fontSize: "0.85rem",
                          fontWeight: "500"
                          // marginBottom: "1rem",
                        },
                        className: b("last:mb-1 px-1 py-1 rounded-lg"),
                        error: {
                          style: {
                            background: "#880808"
                          }
                        }
                      }
                    }
                  ),
                  A && /* @__PURE__ */ e.jsxs(
                    "div",
                    {
                      className: "fixed flex max-w-[548px] items-center divide-x divide-gray-300 bottom-0 right-6 p-2 text-xs text-gray-500 bg-gray-100 dark:bg-dark-800 z-[19999] rounded-t-md",
                      style: {
                        // Shadow to the top left corner
                        boxShadow: "0 -2px 4px rgba(0, 0, 0, 0.1), -2px 0 4px rgba(0, 0, 0, 0.1)"
                      },
                      children: [
                        /* @__PURE__ */ e.jsxs("div", { className: "px-2", children: [
                          "Selected brick: ",
                          I ?? "none"
                        ] }),
                        /* @__PURE__ */ e.jsxs("div", { className: "px-2", children: [
                          "Selected section: ",
                          z ?? "none"
                        ] }),
                        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 px-2", children: [
                          /* @__PURE__ */ e.jsx(de, { defaultChecked: g, onCheckedChange: R, size: "1", id: "debug-mode" }),
                          /* @__PURE__ */ e.jsxs("label", { htmlFor: "debug-mode", className: "cursor-pointer select-none", children: [
                            "Debug mode",
                            " ",
                            /* @__PURE__ */ e.jsx("b", { className: b("font-semibold", g ? "text-upstart-600" : "text-gray-500"), children: g ? "on" : "off" })
                          ] })
                        ] })
                      ]
                    }
                  )
                ]
              }
            )
          ]
        }
      )
    }
  );
}
function xe(c, u) {
  return v({
    gridTemplateAreas: u ? '"navbar navbar" "chat main"' : '"navbar" "main"',
    gridTemplateRows: "64px 1fr",
    gridTemplateColumns: c.isReady === !1 ? "1fr 0px" : u ? "360px 1fr" : "1fr"
    // maxWidth: generationState.isReady === false ? "clamp(500px, 40dvw, 650px)" : "none",
  });
}
function he() {
  const { validatePreviewTheme: c } = E();
  return /* @__PURE__ */ e.jsx("div", { className: "fixed bottom-0 left-0 right-0 flex justify-center items-center z-[9999]", children: /* @__PURE__ */ e.jsxs("div", { className: "p-3 pb-2 bg-black/70 backdrop-blur-md rounded-t-lg max-w-fit flex gap-2 shadow-xl", children: [
    /* @__PURE__ */ e.jsx(C, { variant: "solid", color: "gray", onClick: () => c(!1), children: "Revert" }),
    /* @__PURE__ */ e.jsx(C, { onClick: () => c(!0), variant: "solid", children: "Accept theme" })
  ] }) });
}
export {
  fr as default
};
//# sourceMappingURL=Editor.js.map
