import classNames from "classnames";
import React, { useContext } from "react";
import { RicosContext, RicosNodeContext, RicosViewerContext } from "./../../../../../ricos-context/index.js";
import { Node_Type } from "./../../../../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { ORIGINAL_SHAPE_WIDTH } from "./../../../../../plugin-shape/utils/consts.js";
import { getPaywallSeoClass, isPaywallSeo } from "../../utils/paywall-seo.js";
const disableCustomWidthMapper = {
  [Node_Type.IMAGE]: (componentData, isMobile) => componentData?.image?.width && isMobile && (typeof componentData?.containerData?.width?.custom === "number" ? componentData.containerData.width.custom : parseFloat(componentData?.containerData?.width?.custom || "0")) > 150
};
const isMediumOrFullWidth = (containerData) => {
  return containerData?.width?.size && (containerData.width.size === "CONTENT" || containerData.width?.size === "FULL_WIDTH");
};
const originalSizeMapper = {
  [Node_Type.IMAGE]: (componentData) => isMediumOrFullWidth(componentData.containerData) ? "100%" : `${componentData?.image?.width}px`,
  [Node_Type.GIF]: (componentData) => isMediumOrFullWidth(componentData.containerData) ? "100%" : `${componentData.width}px`,
  [Node_Type.SHAPE]: () => `${ORIGINAL_SHAPE_WIDTH}px`
};
const ContainerElement = ({
  nodeType,
  componentData,
  nodeIndex,
  className,
  children
}) => {
  const { containerData } = componentData;
  const { seoMode } = useContext(RicosViewerContext);
  const { isMobile } = useContext(RicosContext);
  const { parentNode } = useContext(RicosNodeContext);
  const disableCustomWidth = disableCustomWidthMapper[nodeType]?.(componentData, isMobile);
  const customWidth = containerData?.width?.custom && !disableCustomWidth ? `${isNaN(Number(containerData.width.custom)) ? containerData.width.custom : parseInt(containerData.width.custom)}px` : void 0;
  const originalWidth = (containerData?.width?.size === "ORIGINAL" || disableCustomWidth) && originalSizeMapper[nodeType]?.(componentData);
  const width = customWidth || originalWidth;
  const style = componentData && width ? {
    width: `min(100%, ${width})`
  } : void 0;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames(
        className,
        !parentNode && isPaywallSeo(seoMode) && getPaywallSeoClass(seoMode?.paywall || {}, nodeIndex)
      ),
      style
    },
    children
  );
};
export {
  ContainerElement
};
//# sourceMappingURL=container-element.js.map
