import { AlignBottom, AlignCenterHorizontally, AlignTop } 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 { DropdownButton } from "./../../../../_shared/dropdown-button.js";
const VERTICAL_ALIGNMENT_MODAL_ID = "verticalAlignmentButton";
const verticalAlignmentIcons = {
  TOP: AlignTop,
  MIDDLE: AlignCenterHorizontally,
  BOTTOM: AlignBottom
};
const VerticalAlignmentButton = ({ dataHook, toolbarItem }) => {
  const { t } = useContext(RicosContext) || {};
  const isModalOpen = useModalState(getIsModalOpen(VERTICAL_ALIGNMENT_MODAL_ID));
  const [referenceElement, setReferenceElement] = useState(null);
  const verticalAlignment = toolbarItem.attributes.verticalAlignment || "TOP";
  const Icon = verticalAlignmentIcons[verticalAlignment];
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook,
      active: isModalOpen,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      ref: setReferenceElement,
      icon: Icon,
      tooltip: t("Toolbar_VerticalAlignment_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  VERTICAL_ALIGNMENT_MODAL_ID,
  VerticalAlignmentButton,
  verticalAlignmentIcons
};
//# sourceMappingURL=vertical-alignment-button.js.map
