import { Width } from "@wix/wix-ui-icons-common";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { ToolbarButton as ToolbarButtonComponent } from "./../../../_shared/toolbar-button/toolbar-button.js";
import { TABLE_BUTTONS, TABLE_BUTTONS_MODALS_ID } from "../../consts.js";
import { PLUGIN_TOOLBAR_SPACING_BUTTON } from "../../data-hooks.js";
import { TableSpacingModal } from "../../modals/table-spacing-modal.js";
import {
  captureSelectedCellPositions,
  runWithTableCellSelection
} from "../capture-table-cell-selection.js";
import {
  getCellPaddingResolver,
  getCellSpacingResolver,
  isTableSelectedResolver,
  selectedCellIdsResolver,
  selectedNodeResolver
} from "../resolvers.js";
import { createTableStylePreview } from "../table-style-preview.js";
const SpacingButton = ({ dataHook, toolbarItem }) => {
  const { t } = useContext(RicosContext);
  const [referenceElement, setReferenceElement] = useState(null);
  return /* @__PURE__ */ React.createElement(
    ToolbarButtonComponent,
    {
      ref: setReferenceElement,
      prefix: Width,
      onClick: () => {
        toolbarItem.commands?.click({ referenceElement });
      },
      dataHook,
      tooltip: t("TablePlugin_Toolbar_Spacing_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const createSpacingButton = (services) => ({
  id: TABLE_BUTTONS.SPACING,
  type: "modal",
  dataHook: PLUGIN_TOOLBAR_SPACING_BUTTON,
  icon: Width,
  tooltip: "TablePlugin_Toolbar_Spacing_Tooltip",
  command: ({ tiptapEditor, modals, attributes, referenceElement }) => {
    const modalId = TABLE_BUTTONS_MODALS_ID.SPACING;
    const isModalOpen = modals.isModalOpen(modalId);
    if (isModalOpen) {
      modals.closeModal(modalId);
      return;
    }
    const selectedCellPositions = captureSelectedCellPositions(
      tiptapEditor,
      attributes?.selectedCellIds
    );
    const spacingPreview = createTableStylePreview(tiptapEditor, selectedCellPositions);
    modals.togglePluginPanel({
      id: modalId,
      isMobile: services.context.isMobile,
      Component: TableSpacingModal,
      positioning: { placement: "bottom", referenceElement },
      componentProps: {
        referenceElement,
        nodeId: attributes?.selectedNode?.attrs?.id,
        cellSpacing: attributes?.cellSpacing,
        cellPadding: attributes?.cellPadding,
        onCellSpacingPreview: (spacing) => {
          spacingPreview.previewCellSpacing(spacing);
        },
        onCellSpacingCommit: (spacing) => {
          spacingPreview.restore();
          runWithTableCellSelection(tiptapEditor, selectedCellPositions, () => {
            tiptapEditor.chain().setCellSpacing(spacing).run();
          });
        },
        onCellPaddingPreview: (padding) => {
          spacingPreview.previewCellPadding(padding);
        },
        onCellPaddingCommit: (padding) => {
          spacingPreview.restore();
          runWithTableCellSelection(tiptapEditor, selectedCellPositions, () => {
            tiptapEditor.chain().setCellPadding(padding).run();
          });
        }
      }
    });
  },
  attributes: {
    cellSpacing: getCellSpacingResolver,
    cellPadding: getCellPaddingResolver,
    selectedNode: selectedNodeResolver,
    selectedCellIds: selectedCellIdsResolver,
    visible: isTableSelectedResolver
  },
  renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(SpacingButton, { toolbarItem })
});
export {
  SpacingButton,
  createSpacingButton
};
//# sourceMappingURL=spacing-button.js.map
