import { Add } 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 { createPluginToolbarButton } from "./../../../_shared/create-plugin-toolbar-button.js";
import { DropdownButton } from "./../../../_shared/dropdown-button.js";
import { TABLE_BUTTONS, TABLE_BUTTONS_MODALS_ID } from "../../consts.js";
import { PLUGIN_TOOLBAR_ADD_ROW_COL_BUTTON } from "../../data-hooks.js";
import { INSERT_PANEL_OPTIONS } from "../modals/consts.js";
import { InsertDropdown } from "../modals/insert-dropdown.js";
import { getSelectionCategoryResolver, isRowColOrTableSelectedResolver } from "../resolvers.js";
const AddRowColButton = ({ dataHook, toolbarItem }) => {
  const { t } = useContext(RicosContext) || {};
  const [referenceElement, setReferenceElement] = useState(null);
  const isModalOpen = useModalState(getIsModalOpen(TABLE_BUTTONS_MODALS_ID.INSERT));
  return /* @__PURE__ */ React.createElement(
    DropdownButton,
    {
      dataHook,
      active: isModalOpen,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      ref: setReferenceElement,
      icon: Add,
      tooltip: t("TablePlugin_Toolbar_AddRowCol_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const createInsertButton = (services) => createPluginToolbarButton({
  id: TABLE_BUTTONS.INSERT,
  type: "modal",
  dataHook: PLUGIN_TOOLBAR_ADD_ROW_COL_BUTTON,
  tooltip: "TablePlugin_Toolbar_AddRowCol_Tooltip",
  icon: Add,
  getComponentProps: ({ tiptapEditor, attributes, t }) => {
    const category = attributes?.selectedCategory;
    const options = INSERT_PANEL_OPTIONS[category] || [];
    return {
      options: options.map((option) => ({
        id: option.commandKey,
        text: t(option.title),
        icon: option.iconSmall,
        dataHook: option.dataHook
      })),
      onSelect: () => (commandKey) => {
        tiptapEditor.chain().focus()[commandKey]().run();
      }
    };
  },
  command: ({ tiptapEditor, modals, attributes, referenceElement }) => {
    const closeModal = () => modals.closeModal(TABLE_BUTTONS_MODALS_ID.INSERT);
    const isModalOpen = modals.isModalOpen(TABLE_BUTTONS_MODALS_ID.INSERT);
    if (isModalOpen) {
      closeModal();
      return;
    }
    const category = attributes?.selectedCategory;
    modals.openModal({
      id: TABLE_BUTTONS_MODALS_ID.INSERT,
      Component: InsertDropdown,
      componentProps: {
        onClick: (data) => {
          tiptapEditor.chain().focus()[data.commandKey]().run();
          closeModal();
        },
        closeModal,
        category
      },
      layout: services.context.isMobile ? "drawer" : "floating",
      positioning: { referenceElement, placement: "bottom" }
    });
  },
  attributes: {
    selectedCategory: getSelectionCategoryResolver,
    visible: isRowColOrTableSelectedResolver
  },
  renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(AddRowColButton, { toolbarItem })
});
export {
  AddRowColButton,
  createInsertButton
};
//# sourceMappingURL=add-row-col-button.js.map
