"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var image_exports = {};
__export(image_exports, {
  Image: () => Image
});
module.exports = __toCommonJS(image_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../ricos-context/index.js");
var import_theme_color_token = require("./../../_shared/theme-color-token.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_consts = require("../consts.js");
var import_data_hooks = require("../data-hooks.js");
var import_expand = require("../icons/expand.js");
var import_image_viewer_scss = __toESM(require("../statics/styles/image-viewer-scss.js"));
var import_image_container = require("./image-container.js");
var import_use_custom_width_style = require("./use-custom-width-style.js");
var import_use_fallback_width_style = require("./use-fallback-width-style.js");
var import_use_image_dimensions = require("./use-image-dimensions.js");
var import_use_image_social_attributes = require("./use-image-social-attributes.js");
const Image = ({
  dataUrl,
  node,
  className,
  config,
  helpers,
  isMobile,
  seoMode,
  imageClickActionConfig,
  expand,
  shouldLazyLoadImages
}) => {
  const containerData = node.imageData?.containerData || import_consts.RICOS_DEFAULTS.containerData;
  const {
    image,
    altText = toCaptionPlainText(node) || "",
    decorative,
    styles
  } = node.imageData || {};
  const { src } = image || {};
  const { t } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const imageSource = (0, import_react.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 } = (0, import_use_image_dimensions.useImageDimensions)({
    src: imageSource,
    containerData,
    image
  });
  const fallbackWidthStyle = (0, import_use_fallback_width_style.useFallbackWidthStyle)({ containerData, isMobile });
  const customWidthStyle = (0, import_use_custom_width_style.useCustomWidthStyle)({ containerData, isMobile, width });
  const socialAttributes = (0, import_use_image_social_attributes.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 ? (0, import_theme_color_token.resolveDocumentColorToCss)(styles.border.color) : "unset"
    } : {},
    "--ricos-image-default-border-color": config?.colors?.color8 ?? "unset"
  };
  const doDimensionsExist = width !== void 0 && height !== void 0;
  return /* @__PURE__ */ import_react.default.createElement(import_image_container.ImageContainer, { ...imageClickActionConfig, disableDownload: node.imageData?.disableDownload }, doDimensionsExist && imageSource && /* @__PURE__ */ import_react.default.createElement(
    import_ui_components.Image,
    {
      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: (0, import_classnames.default)(import_image_viewer_scss.default.imageWrapper, import_image_viewer_scss.default.imageRatio, className, {
          [import_image_viewer_scss.default.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__ */ import_react.default.createElement(
    "button",
    {
      className: import_image_viewer_scss.default.expandButton,
      onClick: expand,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") {
          expand(e);
        }
      },
      type: "button",
      "data-hook": import_data_hooks.EXPAND_BUTTON,
      "aria-label": t("Image_Expand_Button_AriaLabel")
    },
    /* @__PURE__ */ import_react.default.createElement(import_expand.expand, { className: import_image_viewer_scss.default.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 !== "";
};
//# sourceMappingURL=image.js.map
