import { TextColorLight } from "@wix/wix-ui-icons-common";
import lodash from "lodash";
import React from "react";
import { Decoration_Type } from "./../ricos-types/index.js";
import { getTextColorInSelection } from "./../_shared/resolvers/get-text-color-in-selection.js";
import { isAlwaysVisible } from "./../_shared/resolvers/is-always-visible.js";
import { isNodeSelected } from "./../_shared/resolvers/is-node-selected.js";
import { ColorPickerButton } from "./../toolbars-v3/components/buttons/TextColorButton/text-color-button.js";
import { TEXT_COLOR_MODAL_ID } from "./constants.js";
import { TEXT_BUTTON_TEXT_COLOR } from "./data-hooks.js";
import classes from "./text-button-color-scss.js";
import { TextColorPicker } from "./text-color-picker.js";
const getTextColorTextButtons = (config = { type: "textColor" }) => {
  return [
    {
      id: `${Decoration_Type.COLOR}.foreground`,
      type: "modal",
      presentation: {
        dataHook: TEXT_BUTTON_TEXT_COLOR,
        tooltip: "TextColorButton_Tooltip",
        getIcon({ publicCommands }) {
          const color = publicCommands.getColor("ricos-text-color");
          return () => TextColorLight({
            className: classes.textColorIcon,
            style: { "--ricos-internal-text-color": color }
          });
        },
        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(ColorPickerButton, { toolbarItem, modalId: TEXT_COLOR_MODAL_ID })
      },
      attributes: {
        visible: isAlwaysVisible,
        selectedTextColor: getTextColorInSelection,
        disabled: isNodeSelected
      },
      command: ({ referenceElement, modalService }) => () => {
        modalService.isModalOpen(TEXT_COLOR_MODAL_ID) ? modalService.closeModal(TEXT_COLOR_MODAL_ID) : openColorModal({
          modalId: TEXT_COLOR_MODAL_ID,
          modalType: "ricos-text-color",
          modalService,
          config,
          referenceElement
        });
        return true;
      }
    }
  ];
};
const openColorModal = ({
  modalId,
  modalType,
  modalService,
  referenceElement,
  config
}) => {
  modalService.openModal({
    id: modalId,
    Component: TextColorPicker,
    componentProps: {
      referenceElement,
      type: modalType,
      config
    },
    layout: {
      desktop: referenceElement ? "floating" : "dialog",
      mobile: "drawer"
    },
    noPadding: true,
    ...referenceElement && {
      positioning: { placement: "bottom", referenceElement }
    },
    onClickOutside: {
      on: "pointerup",
      handler: lodash.noop
    },
    returnFocusToEditor: true,
    disableArrowNavigation: true,
    dragHandleSelector: "[data-drag-handler]",
    enableDrag: true,
    withTransition: true
  });
};
export {
  getTextColorTextButtons,
  openColorModal
};
//# sourceMappingURL=get-text-color-text-buttons.js.map
