import React, { useContext, useMemo, useState } from "react";
import { EditorContext, RicosContext, useTrackRender } from "./../../../ricos-context/index.js";
import { getIsExclusiveModalOpen, useModalState } from "./../../../ricos-modals/modal-service-provider.js";
import { ToolbarType } from "./../../../ricos-types/index.js";
import { posToDOMRect } from "./../../../tiptap/index.js";
import { useToolbarBoundary } from "./../../toolbar-boundary.js";
import { FloatingToolbar } from "../../components/FloatingToolbar/floating-toolbar.js";
import { MaxWidthCalculationWrapper } from "../../components/MaxWidthCalculationWrapper/max-width-calculation-wrapper.js";
import { Toolbar } from "../../components/Toolbar/index.js";
import { useIsToolbarEmpty } from "../use-is-toolbar-empty.js";
import { FLOATING_FORMATTING_TOOLBAR } from "./data-hooks.js";
import { formattingItemsRenderers } from "./formatting-renderers.js";
import { useIsVisible } from "./use-is-visible.js";
import { useToolbarsItemsConfig } from "./use-toolbars-items-config.js";
const FloatingFormattingToolbarContent = ({
  itemsConfig
}) => {
  const { isMobile, t } = useContext(RicosContext);
  const {
    adapter: { tiptapEditor }
  } = useContext(EditorContext);
  const [maxWidth, setMaxWidth] = useState(() => tiptapEditor.view.dom.clientWidth);
  return /* @__PURE__ */ React.createElement(MaxWidthCalculationWrapper, { setMaxWidth, "data-hook": FLOATING_FORMATTING_TOOLBAR }, /* @__PURE__ */ React.createElement(
    Toolbar,
    {
      type: "floating",
      isMobile,
      toolbarItemsConfig: itemsConfig,
      toolbarItemsRenderers: formattingItemsRenderers,
      maxWidth,
      alignment: "left",
      ariaLabel: t("FormattingToolbar_AriaLabel")
    }
  ));
};
const FloatingFormattingToolbar = () => {
  useTrackRender("Floating formatting toolbar");
  const isExclusiveModalOpen = useModalState(getIsExclusiveModalOpen);
  const {
    adapter: { tiptapEditor }
  } = useContext(EditorContext);
  const itemsConfig = useToolbarsItemsConfig(ToolbarType.INLINE);
  const boundary = useToolbarBoundary();
  const showFloatingToolbar = useIsVisible();
  const referenceElement = useMemo(
    () => ({
      getBoundingClientRect: () => {
        const { state, view } = tiptapEditor;
        const { from, to } = state.selection;
        return posToDOMRect(view, from, to);
      }
    }),
    [showFloatingToolbar]
  );
  const isFormattingToolbarEmpty = useIsToolbarEmpty(ToolbarType.INLINE);
  if (!showFloatingToolbar || !boundary || isExclusiveModalOpen || isFormattingToolbarEmpty) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    FloatingToolbar,
    {
      hideStrategy: "escaped",
      boundary,
      placement: "top",
      referenceElement
    },
    /* @__PURE__ */ React.createElement(FloatingFormattingToolbarContent, { itemsConfig })
  );
};
export {
  FloatingFormattingToolbar
};
//# sourceMappingURL=floating-formatting-toolbar.js.map
