import React, { useContext, useEffect, useMemo, useState } from "react";
import { isDefined } from "ts-is-present";
import { EditorContext, PluginsEventsContext, RicosContext } from "./../../../ricos-context/index.js";
import { getToolbarSettings, useToolbarSettings } from "./../../../ricos-context/toolbar-context.js";
import { getButtonsListFromConfig } from "./../../../ricos-plugins/toolbar-utils/get-buttons-list-from-config.js";
import { ToolbarType } from "./../../../ricos-types/index.js";
import { isAlwaysVisible } from "./../../../_shared/resolvers/is-always-visible.js";
import { TOOLBARS } from "./../../../editor-common/index.js";
import { ToggleButton } from "../buttons/index.js";
import { Toolbar } from "../Toolbar/toolbar.js";
import styles from "./insert-plugin-toolbar-scss.js";
const InsertPluginToolbar = ({
  buttons,
  type,
  onButtonClick,
  overflownItemsPosition,
  options,
  alignment,
  onlyShownButtons
}) => {
  const { adapter } = useContext(EditorContext);
  const toolbarSettings = useToolbarSettings(getToolbarSettings(ToolbarType.INSERT_PLUGIN));
  const { isMobile, t } = useContext(RicosContext);
  const pluginsEvents = useContext(PluginsEventsContext);
  const [wrapper, setWrapper] = useState(null);
  const [maxWidth, setMaxWidth] = useState(adapter.tiptapEditor.view.dom.clientWidth);
  useEffect(() => {
    if (!wrapper || !window?.ResizeObserver) {
      return;
    }
    setMaxWidth(adapter.tiptapEditor.view.dom.clientWidth);
    const resizeObserver = new ResizeObserver(() => {
      setMaxWidth(adapter.tiptapEditor.view.dom.clientWidth);
    });
    resizeObserver.observe(wrapper);
    return () => resizeObserver.disconnect();
  }, [buttons, options, isMobile, wrapper]);
  const renderers = useMemo(
    () => buttons.reduce((result, addButton) => {
      const button = addButton;
      return {
        ...result,
        [button.id]: ({ toolbarItem, tabIndex }) => /* @__PURE__ */ React.createElement(
          ToggleButton,
          {
            toolbarItem,
            tabIndex,
            onClick: (e) => onButtonClick(addButton, e)
          }
        )
      };
    }, {}),
    [buttons]
  );
  const config = useMemo(
    () => toToolbarButtonsConfig(buttons, t, pluginsEvents, toolbarSettings, isMobile, options),
    [isMobile, options, buttons, t, pluginsEvents, toolbarSettings]
  );
  return /* @__PURE__ */ React.createElement("div", { className: styles.wrapper, ref: setWrapper }, /* @__PURE__ */ React.createElement(
    Toolbar,
    {
      type,
      maxWidth,
      toolbarItemsConfig: config,
      onlyShownButtons,
      toolbarItemsRenderers: renderers,
      isMobile: false,
      overflownItemsPosition,
      alignment,
      ariaLabel: t("PluginToolbar_AriaLabel")
    }
  ));
};
const toToolbarButtonsConfig = (buttons, t, pluginsEvents, toolbarSettingsFunctions, isMobile, options) => {
  const buttonType = isMobile ? "mobile" : "desktop";
  if (!toolbarSettingsFunctions) {
    return buttons.map((b) => toToolbarItemConfig(b, t, pluginsEvents, options));
  }
  const buttonsPerType = getButtonsListFromConfig(toolbarSettingsFunctions, buttonType);
  if (!Array.isArray(buttonsPerType) || buttonsPerType.length === 0) {
    return buttons.map((b) => toToolbarItemConfig(b, t, pluginsEvents, options));
  }
  return buttonsPerType.map((b) => buttons.find((btn) => btn.label === b)).filter(isDefined).map((b) => toToolbarItemConfig(b, t, pluginsEvents, options));
};
const toToolbarItemConfig = (button, t, pluginsEvents, options) => {
  const disabled = options?.disabled;
  return {
    id: button.id,
    type: "toggle",
    presentation: {
      tooltip: t(button.tooltip),
      icon: button.icon,
      dataHook: button.dataHook
    },
    attributes: disabled ? {
      visible: isAlwaysVisible,
      disabled: () => disabled
    } : { visible: isAlwaysVisible },
    commands: {
      click: ({ publicCommands }) => () => {
        pluginsEvents.publishers.byTopic("ricos.toolbars.functionality.buttonClick").publish({
          toolbarType: TOOLBARS.SIDE,
          buttonId: button.id
        });
        pluginsEvents.publishPluginAdd({
          pluginId: button.id,
          entryPoint: TOOLBARS.PLUGIN_MENU
        });
        button.command({ publicCommands });
      }
    }
  };
};
export {
  InsertPluginToolbar
};
//# sourceMappingURL=insert-plugin-toolbar.js.map
