import classNames from "classnames";
import React, { useContext, useMemo } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { resolveDocumentColorToCss } from "./../../_shared/theme-color-token.js";
import { Image as ImageComp } from "./../../ui-components/index.js";
import { RICOS_DEFAULTS } from "../consts.js";
import { EXPAND_BUTTON } from "../data-hooks.js";
import { expand as ExpandIcon } from "../icons/expand.js";
import classes from "../statics/styles/image-viewer-scss.js";
import { ImageContainer } from "./image-container.js";
import { useCustomWidthStyle } from "./use-custom-width-style.js";
import { useFallbackWidthStyle } from "./use-fallback-width-style.js";
import { useImageDimensions } from "./use-image-dimensions.js";
import { useImageSocialAttributes } from "./use-image-social-attributes.js";
const Image = ({
  dataUrl,
  node,
  className,
  config,
  helpers,
  isMobile,
  seoMode,
  imageClickActionConfig,
  expand,
  shouldLazyLoadImages
}) => {
  const containerData = node.imageData?.containerData || RICOS_DEFAULTS.containerData;
  const {
    image,
    altText = toCaptionPlainText(node) || "",
    decorative,
    styles
  } = node.imageData || {};
  const { src } = image || {};
  const { t } = useContext(RicosContext);
  const imageSource = useMemo(() => {
    if (dataUrl) {
      return dataUrl;
    }
    const { url, id } = src || {};
    if (url) {
      return url;
    }
    const { getImageUrl } = helpers ?? {};
    if (getImageUrl && id) {
      return getImageUrl({ file_name: id });
    }
    return id;
  }, [
    dataUrl,
    node.imageData?.image?.src?.url,
    node.imageData?.image?.src?.id,
    helpers?.getImageUrl
  ]);
  const { width, height } = useImageDimensions({
    src: imageSource,
    containerData,
    image
  });
  const fallbackWidthStyle = useFallbackWidthStyle({ containerData, isMobile });
  const customWidthStyle = useCustomWidthStyle({ containerData, isMobile, width });
  const socialAttributes = useImageSocialAttributes({
    config,
    src,
    width: image?.width,
    height: image?.height
  });
  const style = {
    ...isValueSet(styles?.border?.radius) ? {
      "--ricos-image-border-radius": styles?.border?.radius ? `${styles.border.radius}px` : "unset"
    } : {},
    ...isValueSet(styles?.border?.width) ? {
      "--ricos-image-border-width": styles?.border?.width ? `${styles.border.width}px` : "unset"
    } : {},
    ...isValueSet(styles?.border?.color) ? {
      "--ricos-image-border-color": styles?.border?.color ? resolveDocumentColorToCss(styles.border.color) : "unset"
    } : {},
    "--ricos-image-default-border-color": config?.colors?.color8 ?? "unset"
  };
  const doDimensionsExist = width !== void 0 && height !== void 0;
  return /* @__PURE__ */ React.createElement(ImageContainer, { ...imageClickActionConfig, disableDownload: node.imageData?.disableDownload }, doDimensionsExist && imageSource && /* @__PURE__ */ React.createElement(
    ImageComp,
    {
      id: node.imageData?.image?.src?.id ?? imageSource,
      containerId: node.id,
      displayMode: "fill",
      isFluidLayout: true,
      width,
      height,
      uri: node.imageData?.image?.src?.id ?? imageSource,
      alt: decorative ? "" : altText,
      role: decorative ? "presentation" : void 0,
      containerProps: {
        className: classNames(classes.imageWrapper, classes.imageRatio, className, {
          [classes.pointer]: !!expand
        }),
        containerId: node.id,
        style: {
          // oxlint-disable-next-line no-useless-computed-key
          ["--dim-height"]: height,
          // oxlint-disable-next-line no-useless-computed-key
          ["--dim-width"]: width,
          ...fallbackWidthStyle,
          ...customWidthStyle,
          ...style
        },
        dataHook: `image-viewer-${node.id}`
      },
      imageStyles: {
        maxWidth: "100%",
        position: "absolute",
        left: 0,
        top: 0
      },
      socialAttrs: { ...socialAttributes, draggable: false },
      isSEOBot: !!seoMode,
      encoding: config?.encoding,
      ...shouldLazyLoadImages ? {
        placeholderTransition: seoMode ? void 0 : "blur",
        shouldUseLQIP: config?.disableTransition !== false
      } : {}
    }
  ), !!expand && /* @__PURE__ */ React.createElement(
    "button",
    {
      className: classes.expandButton,
      onClick: expand,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") {
          expand(e);
        }
      },
      type: "button",
      "data-hook": EXPAND_BUTTON,
      "aria-label": t("Image_Expand_Button_AriaLabel")
    },
    /* @__PURE__ */ React.createElement(ExpandIcon, { className: classes.expandIcon })
  ));
};
const toCaptionPlainText = (imageNode) => {
  if (!imageNode.nodes?.[0]?.nodes?.length) {
    return "";
  }
  return imageNode.nodes[0].nodes.map((node) => "textData" in node ? node.textData.text : "").join("");
};
const isValueSet = (value) => {
  return value !== void 0 && value !== null && value !== "";
};
export {
  Image
};
//# sourceMappingURL=image.js.map
