import { j as f } from "../../../../../_virtual/jsx-runtime.js";
import { tx as E } from "../../../../style-system/dist/twind.js";
import { useRef as R, useEffect as P } from "react";
import { usePageStyle as B } from "../../shared/hooks/use-page-style.js";
import { usePreviewMode as I, useEditorHelpers as z, useZoom as W, useGridConfig as C, useSelectedBrickId as F, useSelectedSectionId as H } from "../../../../../use-editor.js";
import { useFontWatcher as M } from "../hooks/use-font-watcher.js";
import { useGridObserver as j } from "../hooks/use-grid-observer.js";
import { useResizable as V } from "../hooks/use-resizable.js";
import A from "./EditableSection.js";
import { useDraftHelpers as G, usePageAttributes as L, useSections as $, useGenerationState as N } from "../../../../../use-page-data.js";
function X({ showIntro: b }) {
  const l = I(), i = z(), s = G(), { zoom: k } = W(), c = R(null), d = C(), w = L(), v = $(), x = M(), m = F(), p = H(), S = B({
    attributes: w,
    typography: x,
    editable: !0,
    showIntro: b
  }), g = N();
  return j(c), V("[data-element-kind='brick']", {
    gridSnap: {
      width: d.colWidth,
      height: d.rowHeight
    },
    onResizeStart: (e) => {
      console.log("Resize start", e), e.target.style.setProperty(
        "--original-transition-duration",
        e.target.style.getPropertyValue("transition-duration")
      ), e.target.style.setProperty("transition-duration", "0ms");
    },
    onResizeEnd: (e) => {
      const t = e.target;
      t.style.setProperty(
        "transition-duration",
        t.style.getPropertyValue("--original-transition-duration")
      ), t.style.removeProperty("--original-transition-duration");
      const o = t.dataset.brickId, r = s.getParentBrick(o), n = t.parentElement, u = n.clientWidth - parseFloat(getComputedStyle(n).paddingLeft) - parseFloat(getComputedStyle(n).paddingRight);
      if (!u) {
        console.warn("Parent element width is not available, cannot update brick props.");
        return;
      }
      const a = Math.abs(e.rect.width), y = Math.min(Math.round(a / u * 100), 100), h = l === "mobile" ? "auto" : `${y.toFixed(0)}%`;
      (e.edges.left || e.edges.right) && (y === 100 && r && (console.log("Resizing parent brick to %spx", a), s.updateBrickProps(r.id, {
        width: `${a}px`,
        grow: !1
      })), console.debug("Resizing brick", {
        brickId: o,
        width: h
      }), s.updateBrickProps(o, {
        width: h,
        grow: !1
      })), (e.edges.top || e.edges.bottom) && s.updateBrickProps(o, {
        height: `${e.rect.height}px`
      }), requestAnimationFrame(() => {
        t.style.removeProperty("top"), t.style.removeProperty("left"), t.style.removeProperty("right"), t.style.removeProperty("bottom"), t.style.removeProperty("margin-bottom"), t.style.removeProperty("margin-top"), t.style.removeProperty("margin-left"), t.style.removeProperty("margin-right"), t.style.removeProperty("width"), t.style.removeProperty("height"), t.style.removeProperty("min-height"), t.style.removeProperty("min-width"), t.style.removeProperty("flex-grow"), t.style.removeProperty("transform");
      });
    }
  }), P(() => {
    if (m) {
      const e = document.getElementById(m);
      e && e.scrollIntoView({ behavior: "instant", block: "center" });
    } else if (p) {
      const e = document.getElementById(p);
      e && e.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }, [l]), P(() => {
    const e = (t) => {
      const o = t, r = o.target;
      !r.closest("[data-radix-popper-content-wrapper]") && !r.closest("[data-radix-select-viewport]") && !r.closest("#floating-panel") && !r.closest('[role="dialog"]') && !r.closest('[role="toolbar"]') && !r.closest('[role="navigation"]') && !r.matches('[role="menuitem"]') && !r.matches(".drop-indicator") && !r.closest("#text-editor-menubar") && !r.matches("html") && !r.matches("body") && !r.closest("[data-element-kind]") && !r.matches("[data-element-kind]") && (console.debug("click out, hidding", o, o.target), i.deselectBrick(), i.hidePanel("library"), i.hidePanel("inspector"), i.hidePanel("theme"));
    };
    return g.isReady && document.addEventListener("click", e, !0), () => {
      document.removeEventListener("click", e, !0);
    };
  }, [g.isReady]), /* @__PURE__ */ f.jsx(
    "div",
    {
      id: "page-container",
      ref: c,
      className: E(S),
      style: {
        zoom: k
      },
      children: v.map((e, t) => /* @__PURE__ */ f.jsx(A, { section: e, index: t }, e.id))
    }
  );
}
export {
  X as default
};
//# sourceMappingURL=EditablePage.js.map
