import classNames from "classnames";
import lodash from "lodash";
import React, { useCallback, useContext, useMemo } from "react";
import { ContentTraverserContext, RicosContext } from "./../../../../../ricos-context/index.js";
import { ErrorBoundary } from "../../../components/error-boundary.js";
import { Anchorable } from "../../utils/anchorable.js";
import { ContainerElement } from "./container-element.js";
import { alignmentClassName, sizeClassName, textWrapClassName } from "./get-class-names.js";
import { LinkViewerWrapper } from "./link-viewer-wrapper.js";
import classes from "./plugin-scss.js";
const isDefined = (value) => value !== void 0;
const convertSpoilerData = (data = {}) => {
  return {
    config: {
      spoiler: {
        enabled: !!data.spoiler?.enabled,
        description: data.spoiler?.description,
        buttonContent: data.spoiler?.buttonText
      }
    }
  };
};
const nodeViewContainer = ({
  node,
  nodeIndex,
  customClassNames,
  withHorizontalScroll,
  children
}) => {
  const { isMobile } = useContext(RicosContext);
  const { SpoilerViewerWrapper } = useContext(ContentTraverserContext);
  const dataProperty = `${lodash.camelCase(node.type)}Data`;
  const componentData = node[dataProperty] || {};
  const { containerData, link } = componentData;
  const { alignment, size, textWrap } = customClassNames || {};
  const containerClassName = classNames(
    {
      [classes.pluginContainerMobile]: isMobile,
      [classes.horizontalScrollbar]: withHorizontalScroll
    },
    isDefined(alignment) ? alignment : alignmentClassName(node),
    isDefined(size) ? size : sizeClassName(node),
    isDefined(textWrap) ? textWrap : textWrapClassName(node)
  );
  const renderContainerComponent = useCallback(
    (contentComponent) => /* @__PURE__ */ React.createElement(
      ContainerElement,
      {
        className: containerClassName,
        nodeType: node.type,
        componentData,
        nodeIndex
      },
      contentComponent
    ),
    [
      containerClassName,
      node.type,
      containerData?.width?.custom,
      containerData?.width?.size,
      containerData?.alignment,
      nodeIndex
    ]
  );
  const renderSpoilerWrapper = useCallback(
    (contentComponent) => {
      if (SpoilerViewerWrapper) {
        return /* @__PURE__ */ React.createElement(
          SpoilerViewerWrapper,
          {
            className: containerClassName,
            width: containerData?.width?.custom ? parseInt(containerData.width.custom) : void 0,
            type: node.type,
            componentData: convertSpoilerData(containerData)
          },
          contentComponent
        );
      }
      return contentComponent;
    },
    [
      containerClassName,
      node.type,
      containerData?.width?.custom,
      containerData?.width?.size,
      containerData?.alignment,
      containerData?.spoiler?.enabled,
      containerData?.spoiler?.buttonText,
      containerData?.spoiler?.description
    ]
  );
  const renderLinkWrapper = useCallback(
    (contentComponent) => /* @__PURE__ */ React.createElement(LinkViewerWrapper, { link, nodeType: node.type }, contentComponent),
    [
      node.type,
      link?.url,
      link?.target,
      link?.anchor,
      link?.rel?.nofollow,
      link?.rel?.noreferrer,
      link?.rel?.sponsored
    ]
  );
  if (typeof children === "function") {
    return /* @__PURE__ */ React.createElement(BaseContainer, { node }, children(
      useMemo(
        () => ({
          ContainerElement: (props) => renderContainerComponent(props.children),
          SpoilerWrapper: (props) => renderSpoilerWrapper(props.children),
          LinkWrapper: (props) => renderLinkWrapper(props.children)
        }),
        [renderContainerComponent, renderSpoilerWrapper, renderLinkWrapper]
      )
    ));
  }
  return /* @__PURE__ */ React.createElement(BaseContainer, { node }, renderLinkWrapper(renderSpoilerWrapper(renderContainerComponent(children))));
};
const BaseContainer = ({ children, node }) => {
  return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(Anchorable, { nodeId: node.id }, /* @__PURE__ */ React.createElement("div", { className: classes.atomic }, children)));
};
export {
  nodeViewContainer
};
//# sourceMappingURL=node-view-container.js.map
