import cx from "classnames";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../../ricos-context/index.js";
import { TOOLBAR_DATA_HOOK, TOOLBAR_VISIBLE } from "../data-hooks.js";
import { MobileToolbarOverlay } from "./mobile-toolbar-overlay/mobile-toolbar-overlay.js";
import styles from "./RicosMobileToolbar-scss.js";
const RicosMobileToolbar = ({
  maxWidth,
  toolbarButtons,
  type,
  ariaLabel
}) => {
  const { languageDir } = useContext(RicosContext);
  const [mobileToolbar, setMobileToolbar] = useState(null);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: cx(styles.container, {
        [styles.regularContainer]: type === "regular",
        [styles.floatingContainer]: type === "floating",
        [styles.staticContainer]: type === "static"
      })
    },
    /* @__PURE__ */ React.createElement(MobileToolbarOverlay, { mobileToolbar, maxWidth }, /* @__PURE__ */ React.createElement(
      "div",
      {
        dir: languageDir === "rtl" ? "rtl" : "ltr",
        "data-hook": TOOLBAR_DATA_HOOK,
        className: cx(styles.mobileToolbar, {
          [styles.toolbarFloating]: type === "floating",
          [styles.toolbarStatic]: type === "static"
        }),
        style: {
          maxWidth
        },
        ref: (ref) => {
          setMobileToolbar(ref);
        }
      },
      /* @__PURE__ */ React.createElement(
        "div",
        {
          className: styles.buttons,
          "data-hook": TOOLBAR_VISIBLE,
          role: "toolbar",
          "aria-label": ariaLabel
        },
        toolbarButtons.getButtonsElementsWithDataHook()
      )
    ))
  );
};
export {
  RicosMobileToolbar
};
//# sourceMappingURL=ricos-mobile-toolbar.js.map
