import classNames from "classnames";
import React from "react";
import { useSelection } from "./../ricos-context/selection-context.js";
import { isNodeSelected } from "./../_shared/is-node-selected.js";
import {
  getNodeWidth,
  getPluginContainerClassNames,
  getPluginFocusClassNames,
  getPluginPlacementClassNames
} from "./../_shared/node-styles.js";
import { createRicosFunctionalExtension } from "./create-ricos-extension/index.js";
const getStylesHOC = (isTextWrap, context, nodesWithoutSelection) => (Component) => {
  const Styles = (props) => {
    const { isMobile } = context;
    const shouldShowSelection = !nodesWithoutSelection.includes(props.node.type.name);
    const selection = useSelection();
    const isFocused = React.useMemo(
      () => shouldShowSelection && isNodeSelected(props.editor.state, props.node.attrs.id),
      [selection, shouldShowSelection]
    );
    const className = classNames(
      getPluginPlacementClassNames(props.node, isTextWrap),
      getPluginContainerClassNames(isMobile),
      shouldShowSelection && getPluginFocusClassNames(isFocused)
    );
    const width = getNodeWidth(props.node, isMobile);
    const style = {
      width: width ? `min(100%, ${width}px)` : void 0
    };
    return /* @__PURE__ */ React.createElement("div", { className, style }, /* @__PURE__ */ React.createElement(Component, { ...props }));
  };
  Styles.displayName = "StylesHoc";
  return Styles;
};
const styles = createRicosFunctionalExtension({
  type: "extension",
  groups: [],
  name: "style",
  reconfigure: (config, extensions, ricosProps, _settings, services) => ({
    ...config,
    addNodeHoc() {
      const nodeTypes = extensions.filter((extension) => !extension.groups.includes("custom-styles")).map(({ name }) => name);
      const nodeHoc = getStylesHOC(
        ricosProps.isTextWrap ?? true,
        services.context,
        extensions.filter(({ groups }) => groups.includes("hide-selection")).map(({ name }) => name)
      );
      return {
        nodeTypes,
        priority: 100,
        getNodeHoc: () => nodeHoc
      };
    }
  }),
  createExtensionConfig() {
    return {
      name: this.name,
      priority: 30
    };
  }
});
export {
  styles
};
//# sourceMappingURL=styles.js.map
