import { autoUpdate, flip, hide, offset, shift, useFloating } from "@floating-ui/react-dom";
import React, { useContext, useEffect } from "react";
import ReactDOM from "react-dom";
import { RicosContext, ZIndexContext } from "./../../../ricos-context/index.js";
import { useFloatingToolbarOffset } from "./use-floating-toolbar-offset.js";
const FloatingToolbar = ({
  children,
  hideStrategy,
  referenceElement,
  placement,
  boundary
}) => {
  const zIndexService = useContext(ZIndexContext);
  const { jsdomMode, portal } = useContext(RicosContext);
  const toolbarOffset = useFloatingToolbarOffset({ referenceElement });
  const {
    x,
    y,
    refs: { setReference, setFloating },
    strategy,
    middlewareData
  } = useFloating({
    placement,
    middleware: [
      shift({
        boundary
      }),
      hide({
        strategy: hideStrategy,
        ...hideStrategy !== "referenceHidden" && { boundary }
      }),
      offset(toolbarOffset),
      flip({
        boundary
      })
    ],
    whileElementsMounted: (referenceEl, floatingEl, update) => autoUpdate(referenceEl, floatingEl, update, {
      animationFrame: true
      // this fix issue of reposition when scrolling
    })
  });
  useEffect(() => {
    setReference(referenceElement);
  }, [setReference, referenceElement]);
  if (!portal) {
    return null;
  }
  return ReactDOM.createPortal(
    /* @__PURE__ */ React.createElement(
      "div",
      {
        ref: setFloating,
        style: {
          position: strategy,
          top: y ?? "",
          left: x ?? "",
          zIndex: zIndexService.getZIndex("TOOLBAR"),
          display: jsdomMode ? "block" : middlewareData.hide?.escaped || middlewareData.hide?.referenceHidden || !x && !y ? "none" : "block"
        }
      },
      /* @__PURE__ */ React.createElement("div", { "data-hook": "ricos-floating-toolbar", tabIndex: -1 }, children)
    ),
    portal
  );
};
export {
  FloatingToolbar
};
//# sourceMappingURL=floating-toolbar.js.map
