import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../../ricos-modals/modal-service-provider.js";
import { DividerData_Width } from "./../../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { DropdownButton } from "./../../../_shared/dropdown-button.js";
import { alignmentMap } from "./divider-buttons-data.js";
const getDefaultAlignment = (langDir) => {
  return langDir === "rtl" ? "RIGHT" : "LEFT";
};
const DividerAlignmentButton = ({ toolbarItem, dataHook, id }) => {
  const { t, languageDir } = useContext(RicosContext) || {};
  const isModalOpen = useModalState(getIsModalOpen(id));
  const node = toolbarItem.attributes.selectedNode;
  const [referenceElement, setReferenceElement] = useState(null);
  const getSelectedAlignment = () => node?.attrs?.alignment || getDefaultAlignment(languageDir);
  const selectedAlignment = getSelectedAlignment();
  const SelectedAlignmentIcon = alignmentMap[selectedAlignment];
  const isButtonDisabled = node?.attrs?.width === DividerData_Width.LARGE;
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook,
      active: isModalOpen,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      disabled: isButtonDisabled,
      ref: setReferenceElement,
      icon: SelectedAlignmentIcon,
      tooltip: t("TextAlignmentButton_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  DividerAlignmentButton
};
//# sourceMappingURL=divider-alignment-button.js.map
