import { TextHighlightColor } from "@wix/wix-ui-icons-common";
import React, { useContext, useEffect, useState } from "react";
import { EditorContext, RicosContext } from "./../../ricos-context/index.js";
import { getIsModalOpen, useModalState } from "./../../ricos-modals/modal-service-provider.js";
import { Decoration_Type, Mark_Type } from "./../../ricos-types/index.js";
import { resolveCssColor } from "./../../_shared/resolve-css-color.js";
import { isAlwaysVisible } from "./../../_shared/resolvers/is-always-visible.js";
import { isNodeSelected } from "./../../_shared/resolvers/is-node-selected.js";
import { ToolbarButton } from "./../../_shared/toolbar-button/toolbar-button.js";
import { TEXT_BUTTON_TEXT_HIGHLIGHT } from "../data-hooks.js";
import classes from "../text-button-color-scss.js";
import { SKETCH_COLOR_PICKER_MODAL_ID, SKETCH_DESIGN_MODAL_ID } from "./data-hooks.js";
import { DEFAULT_COLOR } from "./defaults.js";
import { SketchDesignModal } from "./modals/design-modal.js";
const getMarkColor = (editor, markName) => {
  const attrs = editor.getAttributes(markName);
  if (attrs.color) {
    return attrs.color;
  }
  const storedMark = editor.state.storedMarks?.find(
    (mark) => mark.type.name === markName && mark.attrs.color
  );
  if (storedMark?.attrs.color) {
    return storedMark.attrs.color;
  }
  const cursorMark = editor.state.selection.$from.marks().find((mark) => mark.type.name === markName && mark.attrs.color);
  return cursorMark?.attrs.color;
};
const TextHighlightDesignButton = ({ toolbarItem, dataHook }) => {
  const { t } = useContext(RicosContext);
  const { adapter } = useContext(EditorContext);
  const editor = adapter.tiptapEditor;
  const [referenceElement, setReferenceElement] = useState(null);
  const tooltip = t(toolbarItem.presentation?.tooltip);
  const isModalOpen = useModalState(getIsModalOpen(SKETCH_DESIGN_MODAL_ID));
  const readMarkState = () => {
    if (editor.isActive(Mark_Type.SKETCH)) {
      return {
        active: true,
        color: getMarkColor(editor, Mark_Type.SKETCH) ?? DEFAULT_COLOR
      };
    }
    if (editor.isActive(Mark_Type.COLOR_BACKGROUND)) {
      return {
        active: true,
        color: getMarkColor(editor, Mark_Type.COLOR_BACKGROUND) ?? DEFAULT_COLOR
      };
    }
    return { active: false, color: DEFAULT_COLOR };
  };
  const [markState, setMarkState] = useState(readMarkState);
  useEffect(() => {
    const update = () => setMarkState(readMarkState());
    editor.on("transaction", update);
    editor.on("selectionUpdate", update);
    return () => {
      editor.off("transaction", update);
      editor.off("selectionUpdate", update);
    };
  }, [editor]);
  const onClick = (event) => {
    toolbarItem.commands.click({ referenceElement, clickFromKeyboard: !event.detail });
  };
  const Icon = () => TextHighlightColor({
    className: classes.textHighlightIcon,
    style: {
      "--ricos-internal-text-highlight": resolveCssColor(markState.color)
    }
  });
  return /* @__PURE__ */ React.createElement(
    ToolbarButton,
    {
      active: isModalOpen || markState.active,
      ref: setReferenceElement,
      disabled: toolbarItem.attributes.disabled,
      tooltip,
      onClick,
      prefix: Icon,
      dataHook,
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const getSketchHighlightTextButtons = (config) => [
  {
    id: `${Decoration_Type.COLOR}.background`,
    type: "modal",
    presentation: {
      dataHook: TEXT_BUTTON_TEXT_HIGHLIGHT,
      tooltip: "TextHighlightButton_Tooltip",
      icon: TextHighlightColor,
      renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(
        TextHighlightDesignButton,
        {
          toolbarItem,
          dataHook: TEXT_BUTTON_TEXT_HIGHLIGHT
        }
      )
    },
    attributes: {
      visible: isAlwaysVisible,
      disabled: isNodeSelected
    },
    command: ({ modalService, referenceElement, isMobile }) => () => {
      if (!referenceElement) {
        return false;
      }
      modalService.togglePluginPanel({
        id: SKETCH_DESIGN_MODAL_ID,
        Component: SketchDesignModal,
        componentProps: { config, referenceElement },
        isMobile,
        positioning: { referenceElement, placement: "bottom" },
        focusReturnElement: referenceElement,
        type: void 0,
        // Default click-outside only knows the toolbar button; a click in
        // the color-picker subpanel (a separately-mounted floating panel)
        // would close us. Skip closing while the picker is open.
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (modalService.isModalOpen(SKETCH_COLOR_PICKER_MODAL_ID)) {
              return;
            }
            if (!referenceElement?.contains?.(e.target)) {
              modalService.closeModal(SKETCH_DESIGN_MODAL_ID);
            }
          }
        }
      });
      return true;
    }
  }
];
export {
  getSketchHighlightTextButtons
};
//# sourceMappingURL=text-highlight-button.js.map
