import React, { useContext, useState } from "react";
import { TIPTAP_ACTION_BUTTON_TYPE, TIPTAP_LINK_BUTTON_TYPE } from "./../../ricos-content/index.js";
import { RicosContext } from "./../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../ricos-modals/modal-service-provider.js";
import { createPluginToolbarButton } from "./../create-plugin-toolbar-button.js";
import {
  ALIGNMENT_DROPDOWN_OPTION_TEXT_WRAP,
  PLUGIN_TOOLBAR_ALIGNMENT_BUTTON
} from "./../data-hooks.js";
import { DropdownButton } from "../dropdown-button.js";
import { NODE_ALIGNMENT_BUTTONS } from "../node-alignment-dropdown/consts.js";
import { NodeAlignmentDropdown } from "../node-alignment-dropdown/node-alignment-dropdown.js";
import { getNodeAlignment } from "../resolvers/get-node-alignment.js";
import { getNodeInSelection } from "../resolvers/get-node-in-selection.js";
import { getNodeTextWrap } from "../resolvers/get-node-text-wrap.js";
import { isVisibleOnlyOnDesktop } from "../resolvers/is-visible-only-on-desktop.js";
import { PLUGIN_TOOLBAR_BUTTON_ID } from "./plugin-toolbar-buttons-ids.js";
const createNodeAlignmentButton = ({
  services,
  modalId,
  attributes
}) => {
  const isMobile = services.context.isMobile;
  return createPluginToolbarButton({
    id: PLUGIN_TOOLBAR_BUTTON_ID.ALIGNMENT,
    type: "dropdown",
    attributes: {
      nodeAlignment: getNodeAlignment,
      nodeTextWrap: getNodeTextWrap,
      visible: isVisibleOnlyOnDesktop(isMobile),
      selectedNode: getNodeInSelection,
      active: (_, { modals }) => Boolean(modals?.getModal(modalId)),
      ...attributes
    },
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(NodeAlignmentButton, { toolbarItem, modalId }),
    dataHook: PLUGIN_TOOLBAR_ALIGNMENT_BUTTON,
    tooltip: "TextAlignmentButton_Tooltip",
    getIcon: ({ services: services2, attributes: attributes2 }) => {
      const selectedAlignment = attributes2.nodeAlignment || (services2.context.languageDir === "rtl" ? "RIGHT" : "LEFT");
      return NODE_ALIGNMENT_BUTTONS[selectedAlignment].icon;
    },
    Component: NodeAlignmentDropdown,
    getComponentProps: ({ tiptapEditor, modals, attributes: attributes2, t, languageDir }) => {
      const alignment = attributes2.nodeAlignment || getDefaultAlignment(languageDir);
      const getIsTextWrapDisabled = () => !tiptapEditor.can().toggleNodeTextWrap() || alignment === "CENTER";
      return {
        closeModal: () => modals.closeModal(modalId),
        onSelect: (alignment2) => {
          const selectedNode = attributes2.selectedNode;
          tiptapEditor.chain().focus().setNodeAlignment(alignment2).command(({ commands }) => {
            const isCustomWidthSpecified = selectedNode?.attrs.containerData?.width?.custom;
            const excludedNodeTypes = [TIPTAP_LINK_BUTTON_TYPE, TIPTAP_ACTION_BUTTON_TYPE];
            if (!isCustomWidthSpecified && !excludedNodeTypes.includes(selectedNode.type.name)) {
              commands.setNodeSize("SMALL");
            }
            return true;
          }).run();
        },
        onToggle: () => tiptapEditor.chain().focus().toggleNodeTextWrap().run(),
        selectedId: alignment,
        options: [
          ...Object.values(NODE_ALIGNMENT_BUTTONS).map((option) => ({
            type: option.type,
            id: option.commandKey,
            dataHook: option.dataHook,
            label: t(option.text),
            icon: option.iconSmall,
            iconMobile: option.icon
          })),
          {
            type: "toggle",
            id: "TEXT_WRAP",
            dataHook: ALIGNMENT_DROPDOWN_OPTION_TEXT_WRAP,
            label: t("TextwrapObject_ToggleButton"),
            selected: getIsTextWrapDisabled() ? false : attributes2.nodeTextWrap ?? true,
            disabled: getIsTextWrapDisabled(),
            infoContent: getIsTextWrapDisabled() ? t(
              alignment === "CENTER" ? "TextwrapObject_ToggleButton_Info_AlignedCenter" : "TextwrapObject_ToggleButton_Info_UnsupportedContainer"
            ) : void 0
          }
        ]
      };
    },
    command: ({
      modals,
      referenceElement,
      tiptapEditor,
      attributes: attributes2,
      getComponentProps,
      publicCommands
    }) => {
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes: attributes2,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals.isModalOpen(modalId) ? modals.closeModal(modalId) : modals.openModal({
        id: modalId,
        Component: NodeAlignmentDropdown,
        componentProps,
        layout: isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" },
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals.closeModal(modalId);
              return;
            }
          }
        }
      });
    }
  });
};
const NodeAlignmentButton = ({ toolbarItem, modalId }) => {
  const { t, languageDir } = useContext(RicosContext) || {};
  const isModalOpen = useModalState(getIsModalOpen(modalId));
  const [referenceElement, setReferenceElement] = useState(null);
  const getSelectedAlignment = () => toolbarItem?.attributes.nodeAlignment || (languageDir === "rtl" ? "RIGHT" : "LEFT");
  const onClick = (e) => {
    toolbarItem.commands?.click({ referenceElement, e });
  };
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook: PLUGIN_TOOLBAR_ALIGNMENT_BUTTON,
      active: isModalOpen,
      onClick,
      ref: setReferenceElement,
      icon: NODE_ALIGNMENT_BUTTONS[getSelectedAlignment()].icon,
      tooltip: t("TextAlignmentButton_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const getDefaultAlignment = (langDir) => {
  return langDir === "rtl" ? "RIGHT" : "LEFT";
};
export {
  createNodeAlignmentButton
};
//# sourceMappingURL=create-node-alignment-button.js.map
