"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageRenderer = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _core = require("../../core");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * Stateful component that renders a remote image with auto-sizing.
 * Uses `Image.getSize()` to determine intrinsic dimensions, then
 * constrains width to the available screen width.
 */
const ImageRenderer = ({
  node
}) => {
  const src = node.attributes?.src ?? "";
  const alt = node.attributes?.alt ?? "";
  const [imageSize, setImageSize] = (0, _react.useState)({
    width: 0,
    aspectRatio: 1
  });
  const screenWidth = _reactNative.Dimensions.get("window").width - _core.IOVisualCostants.appMarginDefault * 2;
  (0, _react.useLayoutEffect)(() => {
    if (!src) {
      return;
    }
    _reactNative.Image.getSize(src, (width, height) => {
      const aspectRatio = width / height;
      const constrainedWidth = Math.min(width, screenWidth);
      setImageSize({
        width: constrainedWidth,
        aspectRatio
      });
    });
  }, [screenWidth, src]);
  if (!src) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
    accessibilityIgnoresInvertColors: true,
    style: imageSize,
    resizeMode: "contain",
    accessibilityLabel: alt,
    source: {
      uri: src
    }
  }, node.key);
};
exports.ImageRenderer = ImageRenderer;
//# sourceMappingURL=ImageRenderer.js.map