import { ColorBucket } from "@wix/wix-ui-icons-common";
import lodash from "lodash";
import React, { useContext, useState } from "react";
import { RicosContext } from "./../../../ricos-context/index.js";
import { ColorSwatch } from "./../../../_shared/plugin-toolbar/color-swatch.js";
import { ToolbarButton as ToolbarButtonComponent } from "./../../../_shared/toolbar-button/toolbar-button.js";
import { TABLE_BUTTONS, TABLE_COLOR_PICKER } from "../../consts.js";
import { PLUGIN_TOOLBAR_BACKGROUND_COLOR_BUTTON } from "../../data-hooks.js";
import { TableCellColorPicker } from "../../modals/table-cell-color-picker.js";
import {
  captureSelectedCellPositions,
  runWithTableCellSelection
} from "../capture-table-cell-selection.js";
import {
  firstSelectedCellIdResolver,
  getCellBackgroundColorResolver,
  getCellBackgroundColorsResolver,
  selectedCellIdsResolver
} from "../resolvers.js";
import { createTableStylePreview } from "../table-style-preview.js";
const BackgroundColorButton = ({ dataHook, toolbarItem }) => {
  const { t } = useContext(RicosContext);
  const [referenceElement, setReferenceElement] = useState(null);
  const colors = toolbarItem.attributes.backgroundColors ?? [];
  const hasColors = colors.length > 0;
  return /* @__PURE__ */ React.createElement(
    ToolbarButtonComponent,
    {
      ref: setReferenceElement,
      prefix: hasColors ? () => /* @__PURE__ */ React.createElement(ColorSwatch, { colors }) : ColorBucket,
      onClick: () => {
        toolbarItem.commands.click({ referenceElement });
      },
      dataHook,
      tooltip: t("TablePlugin_Toolbar_BGColor_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const createBackgroundColorButton = (services) => ({
  id: TABLE_BUTTONS.BACKGROUND_COLOR,
  type: "modal",
  dataHook: PLUGIN_TOOLBAR_BACKGROUND_COLOR_BUTTON,
  icon: ColorBucket,
  tooltip: "TablePlugin_Toolbar_BGColor_Tooltip",
  command: ({ modals, tiptapEditor, referenceElement, attributes }) => {
    const modalId = TABLE_COLOR_PICKER;
    const isModalOpen = modals.isModalOpen(modalId);
    if (isModalOpen) {
      modals.closeModal(modalId);
      return;
    }
    const firstCellId = attributes.firstSelectedCellId;
    if (!firstCellId) {
      return;
    }
    const selectedCellPositions = captureSelectedCellPositions(
      tiptapEditor,
      attributes.selectedCellIds
    );
    const backgroundPreview = createTableStylePreview(tiptapEditor, selectedCellPositions);
    modals.togglePluginPanel({
      id: modalId,
      isMobile: services.context.isMobile,
      Component: TableCellColorPicker,
      positioning: { placement: "bottom", referenceElement },
      onClickOutside: {
        on: "pointerup",
        handler: lodash.noop
      },
      componentProps: {
        modalId,
        nodeId: firstCellId,
        referenceElement,
        onColorPreview: (color) => {
          backgroundPreview.previewCellBackground(color);
        },
        onColorPreviewEnd: () => {
          backgroundPreview.restore();
        },
        onColorSelected: (color) => {
          backgroundPreview.restore();
          runWithTableCellSelection(tiptapEditor, selectedCellPositions, () => {
            tiptapEditor.chain().focus().updateCellAttribute("cellStyle", { backgroundColor: color }).run();
          });
        }
      }
    });
  },
  attributes: {
    backgroundColor: getCellBackgroundColorResolver,
    backgroundColors: getCellBackgroundColorsResolver,
    firstSelectedCellId: firstSelectedCellIdResolver,
    selectedCellIds: selectedCellIdsResolver
  },
  renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(BackgroundColorButton, { toolbarItem })
});
export {
  BackgroundColorButton,
  createBackgroundColorButton
};
//# sourceMappingURL=background-color-button.js.map
