import { useRef, useLayoutEffect, useEffect } from "react";
import { useEditorSelection } from "./useEditorSelection.js";
function updateToolbarStyle(container, selectionState) {
  let top, left, maxWidth;
  let domRangeRect;
  if (selectionState.name === "expandedNonPointerSelection") {
    domRangeRect = selectionState.selection.getRangeAt(0).getBoundingClientRect();
  } else if (selectionState.name === "expandedPointerSelection") {
    if (document.caretRangeFromPoint) {
      domRangeRect = document.caretRangeFromPoint(selectionState.finishEvent.clientX, selectionState.finishEvent.clientY)?.getBoundingClientRect() || void 0;
    } else if (document.caretPositionFromPoint) {
      domRangeRect = document.caretPositionFromPoint(selectionState.finishEvent.clientX, selectionState.finishEvent.clientY)?.getClientRect() || void 0;
    }
  }
  if (domRangeRect) {
    top = `${domRangeRect.top + window.pageYOffset - container.offsetHeight}px`;
    left = `${Math.min(
      Math.max(0, document.documentElement.clientWidth - container.offsetWidth),
      Math.max(0, domRangeRect.left + window.pageXOffset - container.offsetWidth / 2 + domRangeRect.width / 2)
    )}px`;
    maxWidth = `${document.documentElement.clientWidth}px`;
  } else {
    top = "-1000vh";
    left = "-1000vw";
    maxWidth = "unset";
  }
  container.style.top = top;
  container.style.left = left;
  container.style.maxWidth = maxWidth;
}
const useToolbarState = () => {
  const inlineToolbarRef = useRef(null);
  const selectionState = useEditorSelection();
  const inlineToolbarActive = selectionState.name === "expandedPointerSelection" || selectionState.name === "expandedNonPointerSelection";
  const blockToolbarActive = selectionState.name === "collapsedSelection" || selectionState.name === "emergingPointerSelection";
  useLayoutEffect(() => {
    const container = inlineToolbarRef.current;
    if (!container) {
      return;
    }
    updateToolbarStyle(container, selectionState);
  }, [selectionState]);
  useEffect(() => {
    const container = inlineToolbarRef.current;
    let timeoutId;
    function resize() {
      if (!container) {
        return;
      }
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        updateToolbarStyle(container, selectionState);
      }, 100);
    }
    window.addEventListener("resize", resize);
    return () => {
      window.removeEventListener("resize", resize);
    };
  }, [selectionState]);
  return {
    inlineToolbarRef,
    blockToolbarActive,
    inlineToolbarActive
  };
};
export {
  useToolbarState
};
//# sourceMappingURL=useToolbarsState.js.map
