import React, { useContext, useState } from "react";
import { EditorContext, RicosContext, useTrackRender } from "./../../../ricos-context/index.js";
import {
  getIsStaticTextToolbarEnabled,
  useToolbarSettings
} from "./../../../ricos-context/toolbar-context.js";
import { ToolbarType } from "./../../../ricos-types/index.js";
import { RicosPortal } from "./../../../editor-common/index.js";
import { MaxWidthCalculationWrapper } from "../../components/MaxWidthCalculationWrapper/max-width-calculation-wrapper.js";
import { Toolbar } from "../../components/Toolbar/toolbar.js";
import { formattingItemsRenderers } from "../formatting/formatting-renderers.js";
import { useToolbarsItemsConfig } from "../formatting/use-toolbars-items-config.js";
import { useIsToolbarEmpty } from "../use-is-toolbar-empty.js";
import { STATIC_TOOLBAR_DATA_HOOK } from "./data-hooks.js";
const StaticToolbar = () => {
  useTrackRender("Static toolbar");
  const { languageDir, theme, isMobile, t, environment } = useContext(RicosContext);
  const { isStaticTextToolbarEnabled, textToolbarContainer, staticToolbarAlignment } = useToolbarSettings((state) => ({
    isStaticTextToolbarEnabled: getIsStaticTextToolbarEnabled(state),
    ...state
  }));
  const toolbarItemsConfig = useToolbarsItemsConfig(ToolbarType.STATIC, {
    disabled: !isStaticTextToolbarEnabled
  });
  const {
    adapter: { tiptapEditor }
  } = useContext(EditorContext);
  const [maxWidth, setMaxWidth] = useState(tiptapEditor.view.dom.clientWidth);
  const isEmpty = useIsToolbarEmpty(ToolbarType.STATIC);
  if (isEmpty) {
    return null;
  }
  if (textToolbarContainer) {
    return /* @__PURE__ */ React.createElement(
      RicosPortal,
      {
        languageDir,
        className: theme?.parentClass,
        container: textToolbarContainer,
        environment
      },
      /* @__PURE__ */ React.createElement(
        MaxWidthCalculationWrapper,
        {
          "data-hook": STATIC_TOOLBAR_DATA_HOOK,
          dir: languageDir,
          setMaxWidth
        },
        /* @__PURE__ */ React.createElement(
          Toolbar,
          {
            type: "static",
            isMobile,
            toolbarItemsConfig,
            toolbarItemsRenderers: formattingItemsRenderers,
            maxWidth,
            alignment: staticToolbarAlignment ?? "left",
            ariaLabel: t("FormattingToolbar_AriaLabel")
          }
        )
      )
    );
  }
  if (isStaticTextToolbarEnabled) {
    return /* @__PURE__ */ React.createElement(
      MaxWidthCalculationWrapper,
      {
        "data-hook": STATIC_TOOLBAR_DATA_HOOK,
        dir: languageDir,
        setMaxWidth
      },
      /* @__PURE__ */ React.createElement(
        Toolbar,
        {
          type: "static",
          isMobile,
          toolbarItemsConfig,
          toolbarItemsRenderers: formattingItemsRenderers,
          maxWidth,
          alignment: staticToolbarAlignment ?? "left",
          ariaLabel: t("FormattingToolbar_AriaLabel")
        }
      )
    );
  }
  return null;
};
export {
  StaticToolbar
};
//# sourceMappingURL=static-toolbar.js.map
