import lodash from "lodash";
import { createColorButton } from "./../../_shared/plugin-toolbar/create-color-button.js";
import { createDeleteButton } from "./../../_shared/plugin-toolbar/create-delete-button.js";
import { createNodeAlignmentButton } from "./../../_shared/plugin-toolbar/create-node-alignment-button.js";
import { createReplaceButton } from "./../../_shared/plugin-toolbar/create-replace-button.js";
import { createNodeSizeButton } from "./../../_shared/plugin-toolbar/node-size-button/create-node-size-button.js";
import { ShapeColorPickerModal } from "./../components/shape-color-picker-modal.js";
import { ShapeColorsModal } from "./../components/shape-colors-modal.js";
import { FLOATING_PLUGIN_TOOLBAR } from "./../../toolbars-v3/index.js";
import { ShapeSelectModal } from "../components/shape-select-modal.js";
import {
  DEFAULT_COLOR,
  SHAPE_ALIGNMENT_MODAL_ID,
  SHAPE_COLORS_MODAL_ID,
  SHAPE_SIZE_MODAL_ID
} from "../utils/consts.js";
import { SHAPE_SELECT_MODAL } from "../utils/data-hooks.js";
const getShapeColorMap = (selectedNode) => {
  const colors = selectedNode.attrs?.styles?.colors;
  if (!colors) {
    return { [DEFAULT_COLOR]: DEFAULT_COLOR };
  }
  return colors;
};
const getShapeColors = (selectedNode) => {
  const colors = getShapeColorMap(selectedNode);
  return Object.entries(colors).map(([originalColor, customColor]) => customColor || originalColor);
};
const getToolbarButtons = (config, services) => {
  const { modals } = services;
  const color = createColorButton({
    getColors: (selectedNode) => getShapeColors(selectedNode),
    modalId: SHAPE_COLORS_MODAL_ID,
    command: ({ referenceElement, attributes: { selectedNode } }) => {
      const colors = getShapeColors(selectedNode);
      const isSingleColor = colors.length === 1;
      const basePanelParams = {
        isMobile: services.context.isMobile,
        positioning: {
          referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
          placement: "bottom"
        },
        onClickOutside: {
          on: "pointerup",
          handler: lodash.noop
        },
        focusReturnElement: referenceElement
      };
      if (isSingleColor) {
        const colorMap = getShapeColorMap(selectedNode);
        const [originalColor] = Object.entries(colorMap);
        modals.togglePluginPanel({
          id: SHAPE_COLORS_MODAL_ID,
          Component: ShapeColorPickerModal,
          componentProps: {
            nodeId: selectedNode.attrs.id,
            originalColor: originalColor[0],
            initialColor: originalColor[1] || originalColor[0]
          },
          ...basePanelParams
        });
        return;
      }
      modals.togglePluginPanel({
        id: SHAPE_COLORS_MODAL_ID,
        Component: ShapeColorsModal,
        componentProps: {
          nodeId: selectedNode.attrs.id
        },
        ...basePanelParams
      });
    }
  });
  const nodeSize = createNodeSizeButton({
    services,
    modalId: SHAPE_SIZE_MODAL_ID,
    options: ["SMALL", "CONTENT", "FULL_WIDTH", "ORIGINAL"]
  });
  const nodeAlignment = createNodeAlignmentButton({
    services,
    modalId: SHAPE_ALIGNMENT_MODAL_ID
  });
  const replace = createReplaceButton({
    tooltip: "ReplaceShapeButton_Tooltip",
    command: ({ referenceElement, attributes: { selectedNode } }) => {
      modals.togglePluginPanel({
        id: SHAPE_SELECT_MODAL,
        Component: ShapeSelectModal,
        componentProps: {
          nodeId: selectedNode.attrs.id,
          getShapeUrl: config.getShapeUrl
        },
        isMobile: services.context.isMobile,
        positioning: {
          referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
          placement: "bottom"
        }
      });
    }
  });
  const deleteButton = createDeleteButton({});
  return [color, nodeSize, nodeAlignment, replace, deleteButton];
};
export {
  getToolbarButtons
};
//# sourceMappingURL=get-toolbar-buttons.js.map
