import interact from "../../../../../_virtual/interact.min.js";
import { useRef, useEffect } from "react";
import { a as e } from "../../../../sdk/dist/shared/chunk-RDZK73KV.js";
import { useDraftHelpers } from "../../../../../use-page-data.js";
function useResizableSection(section) {
  const interactable = useRef(null);
  const draftHelpers = useDraftHelpers();
  useEffect(() => {
    const sectionEl = document.getElementById(section.id);
    e(sectionEl, "Section element not found");
    interactable.current = interact(`#${section.id}`);
    const resizable = interactable.current.resizable({
      edges: {
        top: false,
        left: false,
        bottom: ".section-resizable-handle",
        right: false
      },
      inertia: true,
      autoScroll: false,
      listeners: {
        start: (event) => {
          event.stopPropagation();
        },
        move: (event) => {
          event.stopPropagation();
          const h = sectionEl.dataset.h ? parseFloat(sectionEl.dataset.h) : sectionEl.offsetHeight;
          const newHeight = h + event.delta.y;
          requestAnimationFrame(() => {
            Object.assign(sectionEl.style, {
              minHeight: `${newHeight}px`,
              // maxHeight: `${newHeight}px`,
              flex: "none"
            });
          });
          Object.assign(sectionEl.dataset, { h: newHeight });
        },
        end: (event) => {
          const minHeight = `${parseFloat(sectionEl.dataset.h).toFixed(0)}px`;
          sectionEl.style.removeProperty("minHeight");
          sectionEl.style.removeProperty("height");
          sectionEl.style.removeProperty("maxHeight");
          sectionEl.style.removeProperty("flex");
          sectionEl.dataset.h = "";
          console.log("Resized section", section.id, "to height", minHeight);
          draftHelpers.updateSectionProps(section.id, {
            minHeight
          });
        }
      }
    });
    resizable.on("resizeend", function() {
      window.addEventListener("click", (ev) => ev.stopImmediatePropagation(), {
        capture: true,
        once: true
      });
    });
    return () => {
      interactable.current?.unset();
      interactable.current = null;
    };
  }, []);
}
export {
  useResizableSection
};
//# sourceMappingURL=use-resizable-section.js.map
