import classNames from "classnames";
import React, { useContext, useRef } from "react";
import { toggleQuickActionsModal } from "./../../../ricos-common-plugins/quick-actions/toggle-quick-actions-modal/toggle-quick-actions-modal.js";
import {
  EditorContext,
  EditorQueryContext,
  ModalServiceContext,
  PluginsContext,
  RicosContext
} from "./../../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../../ricos-modals/modal-service-provider.js";
import { QUICK_ACTIONS_MODAL_ID } from "./../../../ricos-common-plugins/quick-actions/types.js";
import { PlusButton } from "./plus-button.js";
import styles from "./styles/floating-add-plugin-menu-scss.js";
import { useSelectionToPosition } from "./use-selection-to-position.js";
const FloatingAddPluginMenu = ({
  onClick,
  supportedButtonIds,
  isVisible = () => true,
  dir,
  nodeId
}) => {
  const floatingMenuWrapperRef = useRef(null);
  const buttonRef = useRef(null);
  const modalService = useContext(ModalServiceContext) || {};
  const { languageDir, isMobile } = useContext(RicosContext) || {};
  const editorQuery = useContext(EditorQueryContext);
  const { adapter } = useContext(EditorContext);
  const position = useSelectionToPosition(adapter.tiptapEditor);
  const plugins = useContext(PluginsContext);
  const FloatingButtonCustomComponent = plugins.getFloatingToolbarButtons().find(
    (button) => button.isVisible({
      editorQuery: editorQuery.query,
      modalService,
      editor: adapter.tiptapEditor,
      nodeId
    })
  )?.Component ?? void 0;
  const direction = dir || languageDir;
  const isModalOpen = useModalState(getIsModalOpen(QUICK_ACTIONS_MODAL_ID));
  const calcButtonPosition = (position2) => {
    const buttonHeight = 20;
    const { top = 0, height = 0 } = position2 || {};
    const topPosition = top + height / 2 - buttonHeight / 2;
    return { top: `${topPosition}px` };
  };
  const defaultTrigger = () => toggleQuickActionsModal({
    modalService,
    referenceElement: floatingMenuWrapperRef.current,
    isMobile,
    supportedPlugins: supportedButtonIds
  });
  const onPlusButtonClick = () => onClick ? onClick(defaultTrigger) : defaultTrigger();
  return !isMobile ? /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames(styles.floatingAddPluginMenu_wrapper),
      ref: floatingMenuWrapperRef,
      "data-hook": "floating-add-plugin-menu",
      dir: direction
    },
    !!position && FloatingButtonCustomComponent ? /* @__PURE__ */ React.createElement(
      FloatingButtonCustomComponent,
      {
        className: classNames(
          styles.floatingAddPluginMenu_plus_button_position,
          styles[direction]
        ),
        position: calcButtonPosition(position)
      }
    ) : !!position && isVisible() ? /* @__PURE__ */ React.createElement(
      PlusButton,
      {
        onClick: onPlusButtonClick,
        position: calcButtonPosition(position),
        ref: buttonRef,
        rotate: isModalOpen,
        direction
      }
    ) : null
  ) : null;
};
export {
  FloatingAddPluginMenu
};
//# sourceMappingURL=floating-add-plugin-menu.js.map
