import React, { useContext, useState } from "react";
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 { PLUGIN_TOOLBAR_SIZE_BUTTON } from "../../data-hooks.js";
import { DropdownButton } from "../../dropdown-button.js";
import { getNodeSize } from "../../resolvers/get-node-size.js";
import { PLUGIN_TOOLBAR_BUTTON_ID } from "../plugin-toolbar-buttons-ids.js";
import { DEFAULT_OPTIONS, NODE_SIZE_BUTTONS } from "./consts.js";
import { NodeSizeDropdown } from "./node-size-dropdown.js";
const createNodeSizeButton = ({
  services,
  modalId,
  options
}) => {
  return createPluginToolbarButton({
    id: PLUGIN_TOOLBAR_BUTTON_ID.SIZE,
    type: "dropdown",
    attributes: {
      nodeSize: getNodeSize,
      visible: () => !services.context.isMobile,
      active: (_, { modals }) => Boolean(modals?.getModal(modalId))
    },
    tooltip: "ButtonModal_Size_Section",
    dataHook: PLUGIN_TOOLBAR_SIZE_BUTTON,
    getIcon: ({ attributes }) => NODE_SIZE_BUTTONS[attributes.nodeSize || "CONTENT"].icon,
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(NodeSizeButton, { id: modalId, toolbarItem }),
    Component: NodeSizeDropdown,
    command: (props) => {
      const {
        modals,
        referenceElement,
        getComponentProps,
        tiptapEditor,
        attributes,
        publicCommands
      } = props;
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals.isModalOpen(modalId) ? modals.closeModal(modalId) : modals.openModal({
        id: modalId,
        Component: NodeSizeDropdown,
        componentProps,
        layout: services.context.isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" },
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals.closeModal(modalId);
              return;
            }
          }
        }
      });
    },
    getComponentProps: ({ tiptapEditor, modals, attributes, t }) => ({
      dropdownOptions: [...options || DEFAULT_OPTIONS].map((option) => NODE_SIZE_BUTTONS[option]).map((option) => ({
        id: option.value,
        dataHook: option.dataHook,
        label: t(option.text),
        icon: option.iconSmall,
        iconMobile: option.icon
      })),
      onSelect: (size) => {
        tiptapEditor.chain().focus().setNodeSize(size).setNodeAlignment("CENTER").run();
        modals.closeModal(modalId);
      },
      selectedId: attributes.nodeSize || "CONTENT",
      closeModal: () => modals.closeModal(modalId)
    })
  });
};
const NodeSizeButton = ({ toolbarItem, id }) => {
  const { t } = useContext(RicosContext) || {};
  const isModalOpen = useModalState(getIsModalOpen(id));
  const [referenceElement, setReferenceElement] = useState(null);
  const getSelectedSize = () => toolbarItem?.attributes.nodeSize || "CONTENT";
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook: PLUGIN_TOOLBAR_SIZE_BUTTON,
      active: isModalOpen,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      icon: NODE_SIZE_BUTTONS[getSelectedSize()].icon,
      ref: setReferenceElement,
      tooltip: t("ButtonModal_Size_Section"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  createNodeSizeButton
};
//# sourceMappingURL=create-node-size-button.js.map
