import React, { useContext, useEffect, useState } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { useModalService } from "./../../ricos-modals/index.js";
import { PLUGIN_TOOLBAR_COLOR_BUTTON } from "../data-hooks.js";
import { getNodeInSelection } from "../resolvers/get-node-in-selection.js";
import { ToolbarButton as ToolbarButtonComponent } from "../toolbar-button/toolbar-button.js";
import { ColorSwatch } from "./color-swatch.js";
import { PLUGIN_TOOLBAR_BUTTON_ID } from "./plugin-toolbar-buttons-ids.js";
const createColorButton = ({
  command,
  dataHook,
  buttonId,
  modalId,
  getColors
}) => {
  return {
    id: buttonId ?? PLUGIN_TOOLBAR_BUTTON_ID.COLOR,
    type: "color",
    attributes: {
      selectedNode: getNodeInSelection,
      active: (_, { modals }) => modalId ? !!modals?.getModal(modalId) : false
    },
    tooltip: "ColorButton_Tooltip",
    dataHook: dataHook ?? PLUGIN_TOOLBAR_COLOR_BUTTON,
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(ToolbarColorButton, { dataHook, toolbarItem, getColors }),
    getComponentProps: ({ attributes }) => ({
      colors: attributes.selectedNode ? getColors(attributes.selectedNode) : []
    }),
    command
  };
};
const ToolbarColorButton = ({
  toolbarItem,
  dataHook,
  getColors
}) => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [isActive, setIsActive] = useState(toolbarItem.attributes.active);
  const { isMobile, t } = useContext(RicosContext) || {};
  const modalService = useModalService();
  const onClick = toolbarItem.commands.click;
  useEffect(() => {
    modalService.onModalOpened(() => {
      setIsActive(!!toolbarItem.attributes.active);
    });
    modalService.onModalClosed(() => {
      setIsActive(!!toolbarItem.attributes.active);
    });
  }, [modalService]);
  const resolvedColors = toolbarItem.attributes.selectedNode ? getColors(toolbarItem.attributes.selectedNode) : [];
  return /* @__PURE__ */ React.createElement(
    ToolbarButtonComponent,
    {
      prefix: () => /* @__PURE__ */ React.createElement(ColorSwatch, { colors: resolvedColors }),
      active: isActive,
      onClick: () => onClick({ isMobile, referenceElement }),
      dataHook,
      tooltip: t("ColourButton_Tooltip"),
      ariaLabel: t("ColourButton_Tooltip"),
      ref: setReferenceElement,
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  createColorButton
};
//# sourceMappingURL=create-color-button.js.map
