import classNames from "classnames";
import React, { useContext, useEffect } from "react";
import { useConverters } from "./../../pm-converters/context.js";
import {
  PluginsEventsContext,
  RicosContext,
  usePluginExportsContext
} from "./../../ricos-context/index.js";
import { Node_Type } from "./../../ricos-types/index.js";
import { isNodeSelected } from "./../../_shared/is-node-selected.js";
import { normalizeLineHeight } from "./../../_shared/line-spacing-utils.js";
import { getPluginContainerClassNames, getPluginFocusClassNames } from "./../../_shared/node-styles.js";
import { CAPTION } from "../data-hooks.js";
import classes from "./caption-scss.js";
import { useEditorSelection } from "./use-editor-selection.js";
const Caption = ({ NodeViewContent, editor, node, getPos }) => {
  const { isMobile } = useContext(RicosContext);
  const pluginsEvents = useContext(PluginsEventsContext);
  const pluginExports = usePluginExportsContext();
  const selectedNodes = useEditorSelection(editor).selectedNodes;
  const converters = useConverters();
  const captionPos = getPos();
  const doc = editor.state.doc;
  const $pos = doc.resolve(captionPos);
  const parentNode = $pos.parent ?? null;
  if (!parentNode) {
    console.error("Caption must have a parent.");
    return null;
  }
  const ricosParentNode = converters.fromPmNode(parentNode.toJSON());
  const AiButton = pluginExports.aiIntegrations?.image?.captionTrigger;
  const isCaptionSelected = selectedNodes.find(
    (selectedNode) => selectedNode.attrs.id === node.attrs?.id
  );
  const isParentSelected = selectedNodes.find(
    (selectedNode) => selectedNode.attrs.id === ricosParentNode?.id
  );
  useEffect(() => {
    if (node.content.firstChild?.text || isCaptionSelected || isParentSelected) {
      return;
    }
    pluginsEvents?.publishPluginLayoutShift({ nodeId: node.attrs.id });
  }, [isCaptionSelected, isParentSelected]);
  useEffect(() => {
    const hasContent = !!node.content.firstChild?.text;
    const { showEmpty } = node.attrs;
    const { selection } = editor.state;
    const isMultiNodeSelection = !selection.empty && selection.$from.parent !== selection.$to.parent;
    if (isMultiNodeSelection) {
      return;
    }
    if (!isCaptionSelected && (!showEmpty || hasContent)) {
      return;
    }
    if (captionPos === null) {
      return;
    }
    const { tr } = editor.state;
    const nodePos = captionPos - 1;
    if (isCaptionSelected && hasContent && !showEmpty) {
      tr.setNodeAttribute(nodePos, "showEmpty", true);
      editor.view.dispatch(tr);
      return;
    }
    if (!isCaptionSelected && showEmpty && !hasContent) {
      tr.setNodeAttribute(nodePos, "showEmpty", false);
      editor.view.dispatch(tr);
    }
  }, [captionPos, isCaptionSelected, node.content.firstChild?.text]);
  const isVisible = !!node.content.firstChild || node.attrs.showEmpty;
  const hasAiButton = isCaptionSelected && ricosParentNode?.type === Node_Type.IMAGE && AiButton;
  const isFocused = isNodeSelected(editor.state, node.attrs.id);
  const className = classNames(
    classes.caption,
    getPluginContainerClassNames(isMobile),
    getPluginFocusClassNames(isFocused)
  );
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className,
      style: isVisible ? void 0 : {
        display: "none"
      }
    },
    hasAiButton ? /* @__PURE__ */ React.createElement("div", { className: classes.aiButtonContainer }, /* @__PURE__ */ React.createElement(
      AiButton,
      {
        node: ricosParentNode,
        onCaptionChange: (caption) => {
          if (captionPos === null) {
            return;
          }
          const { state } = editor;
          const captionNode = state.doc.nodeAt(captionPos);
          if (!captionNode) {
            return;
          }
          const from = captionPos + 1;
          const to = captionPos + captionNode.nodeSize - 1;
          const { tr } = state;
          tr.insertText(caption, from, to);
          editor.view.dispatch(tr);
        }
      }
    )) : null,
    /* @__PURE__ */ React.createElement(
      NodeViewContent,
      {
        dir: "auto",
        "data-hook": CAPTION,
        as: "figcaption",
        style: {
          width: "100%",
          overflow: "auto",
          ...node.attrs?.textStyle?.lineHeight && {
            lineHeight: normalizeLineHeight(node.attrs?.textStyle?.lineHeight)
          },
          textAlign: node.attrs?.textStyle?.textAlignment,
          paddingTop: node.attrs?.style?.paddingTop ?? node.attrs?.styleDefaults?.paddingTop,
          paddingBottom: node.attrs?.style?.paddingBottom ?? node.attrs?.styleDefaults?.paddingBottom
        }
      }
    )
  );
};
export {
  Caption
};
//# sourceMappingURL=caption.js.map
