import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { useRef, useEffect } from "react";
import { usePageStyle } from "../../shared/hooks/use-page-style.js";
import { usePreviewMode, useEditorHelpers, useZoom, useGridConfig, useSelectedBrickId, useSelectedSectionId } from "../../../../../use-editor.js";
import { useGridObserver } from "../hooks/use-grid-observer.js";
import { useResizable } from "../hooks/use-resizable.js";
import EditableSection from "./EditableSection.js";
import { useDraftHelpers, useSections, useGenerationState } from "../../../../../use-page-data.js";
function EditablePage({ showIntro }) {
  const previewMode = usePreviewMode();
  const editorHelpers = useEditorHelpers();
  const draftHelpers = useDraftHelpers();
  const { zoom } = useZoom();
  const pageRef = useRef(null);
  const gridConfig = useGridConfig();
  const sections = useSections();
  const selectedBrickId = useSelectedBrickId();
  const selectedSectionId = useSelectedSectionId();
  const { isSetup } = useGenerationState();
  const pageClassName = usePageStyle({
    editable: !isSetup,
    showIntro
  });
  const generationState = useGenerationState();
  useGridObserver(pageRef);
  useResizable("[data-element-kind='brick']", {
    gridSnap: {
      width: gridConfig.colWidth,
      height: gridConfig.rowHeight
    },
    onResizeStart: (event) => {
      console.log("Resize start", event);
      event.target.style.setProperty(
        "--original-transition-duration",
        event.target.style.getPropertyValue("transition-duration")
      );
      event.target.style.setProperty("transition-duration", "0ms");
    },
    onResizeEnd: (event) => {
      const target = event.target;
      target.style.setProperty(
        "transition-duration",
        target.style.getPropertyValue("--original-transition-duration")
      );
      target.style.removeProperty("--original-transition-duration");
      const brickId = target.dataset.brickId;
      const parentBrick = draftHelpers.getParentBrick(brickId);
      const parentWrapperElement = target.parentElement;
      const parentWidth = parentWrapperElement.clientWidth - parseFloat(getComputedStyle(parentWrapperElement).paddingLeft) - parseFloat(getComputedStyle(parentWrapperElement).paddingRight);
      if (!parentWidth) {
        console.warn("Parent element width is not available, cannot update brick props.");
        return;
      }
      const rectWidth = Math.abs(event.rect.width);
      const futureWidth = Math.min(Math.round(rectWidth / parentWidth * 100), 100);
      const widthPercentage = previewMode === "mobile" ? "auto" : `${futureWidth.toFixed(0)}%`;
      if (event.edges.left || event.edges.right) {
        if (futureWidth === 100 && parentBrick) {
          console.log("Resizing parent brick to %spx", rectWidth);
          draftHelpers.updateBrickProps(parentBrick.id, {
            width: `${rectWidth}px`,
            grow: false
          });
        }
        console.debug("Resizing brick", {
          brickId,
          width: widthPercentage
        });
        draftHelpers.updateBrickProps(brickId, {
          width: widthPercentage,
          grow: false
        });
      }
      if (event.edges.top || event.edges.bottom) {
        draftHelpers.updateBrickProps(brickId, {
          height: `${event.rect.height}px`
        });
      }
      requestAnimationFrame(() => {
        target.style.removeProperty("top");
        target.style.removeProperty("left");
        target.style.removeProperty("right");
        target.style.removeProperty("bottom");
        target.style.removeProperty("margin-bottom");
        target.style.removeProperty("margin-top");
        target.style.removeProperty("margin-left");
        target.style.removeProperty("margin-right");
        target.style.removeProperty("width");
        target.style.removeProperty("height");
        target.style.removeProperty("min-height");
        target.style.removeProperty("min-width");
        target.style.removeProperty("flex-grow");
        target.style.removeProperty("transform");
      });
    }
  });
  useEffect(() => {
    if (selectedBrickId) {
      const element = document.getElementById(selectedBrickId);
      if (element) {
        element.scrollIntoView({ behavior: "instant", block: "center" });
      }
    } else if (selectedSectionId) {
      const element = document.getElementById(selectedSectionId);
      if (element) {
        element.scrollIntoView({ behavior: "instant", block: "center" });
      }
    }
  }, [previewMode]);
  useEffect(() => {
    const listener = (e) => {
      const event = e;
      const target = event.target;
      if (!target.closest("[data-radix-popper-content-wrapper]") && !target.closest("[data-radix-select-viewport]") && !target.closest("#floating-panel") && !target.closest('[role="dialog"]') && !target.closest('[role="toolbar"]') && !target.closest('[role="navigation"]') && !target.matches('[role="menuitem"]') && !target.matches(".drop-indicator") && !target.closest("#text-editor-menubar") && !target.matches("html") && !target.matches("body") && !target.closest("[data-element-kind]") && !target.matches("[data-element-kind]")) {
        console.debug("click out, hidding", event, event.target);
        editorHelpers.deselectBrick();
        editorHelpers.hidePanel("library");
        editorHelpers.hidePanel("inspector");
        editorHelpers.hidePanel("theme");
      }
    };
    if (generationState.isReady) {
      document.addEventListener("click", listener, true);
    }
    return () => {
      document.removeEventListener("click", listener, true);
    };
  }, [generationState.isReady]);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      id: "page-container",
      ref: pageRef,
      className: D(pageClassName),
      style: {
        zoom
      },
      children: sections.map((section, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(EditableSection, { section, index }, section.id))
    }
  );
}
export {
  EditablePage as default
};
//# sourceMappingURL=EditablePage.js.map
