import { ChevronDownSmall } from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../../../ricos-modals/modal-service-provider.js";
import { Node_Type } from "./../../../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { headingsMap, translateHeading } from "./../../../../_shared/headings-dropdown-utils.js";
import { ToolbarButton } from "./../../../../_shared/toolbar-button/toolbar-button.js";
import styles from "./HeadingButton-scss.js";
const HeadingButton = ({
  toolbarItem,
  dataHook
}) => {
  const { t } = useContext(RicosContext);
  const isModalOpen = useModalState(getIsModalOpen(`${Node_Type.HEADING}.modal`));
  const [referenceElement, setReferenceElement] = useState(null);
  const selectedHeading = toolbarItem.attributes.selectedHeading;
  const Label = translateHeading(headingsMap[selectedHeading], t);
  const prefix = React.useCallback(() => {
    return /* @__PURE__ */ React.createElement("span", { className: styles.headingButtonContent }, Label, /* @__PURE__ */ React.createElement(ChevronDownSmall, null));
  }, [Label]);
  const tooltip = t(toolbarItem.presentation?.tooltip);
  return /* @__PURE__ */ React.createElement(
    ToolbarButton,
    {
      ref: setReferenceElement,
      disabled: toolbarItem.attributes.disabled,
      active: isModalOpen,
      tooltip,
      onClick: (e) => toolbarItem.commands?.click({ referenceElement, clickFromKeyboard: !e.detail }),
      prefix,
      dataHook,
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  HeadingButton
};
//# sourceMappingURL=heading-button.js.map
