"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _MediaComponents = require("./StyledInputComponents/MediaComponents");
var _reactRedux = require("react-redux");
var _chatSettingsSlice = require("../../roomStore/chatSettingsSlice");
var _MODAL_TYPES = require("../../helpers/constants/MODAL_TYPES");
var _reactNative = require("react-native");
var _mediaDimensions = require("../../helpers/mediaDimensions");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const FALLBACK_IMAGE = 'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
const CustomMessageImage = ({
  fileURL,
  fileName,
  mimetype
}) => {
  const [loading, setLoading] = (0, _react.useState)(true);
  // Start with a neutral box; swap to the real aspect ratio once the
  // image's natural dimensions are known so it's shown scaled, not cropped.
  const [dims, setDims] = (0, _react.useState)((0, _mediaDimensions.defaultMediaDims)());
  const dispatch = (0, _reactRedux.useDispatch)();
  (0, _react.useEffect)(() => {
    if (!fileURL) {
      return;
    }
    let active = true;
    _reactNative.Image.getSize(fileURL, (w, h) => {
      if (active) {
        setDims((0, _mediaDimensions.fitMediaDimensions)(w, h));
      }
    }, () => {
      /* keep the default box if the size probe fails */
    });
    return () => {
      active = false;
    };
  }, [fileURL]);
  const handleOpen = () => {
    dispatch((0, _chatSettingsSlice.setActiveFile)({
      fileName,
      fileURL,
      mimetype
    }));
    dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.FILE_PREVIEW));
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaComponents.Container, {
    style: {
      width: dims.width
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
      onPress: handleOpen,
      activeOpacity: 0.9,
      children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: {
          position: 'absolute',
          width: dims.width,
          height: dims.height,
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
          size: "small",
          color: "#0052CD"
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        source: {
          uri: fileURL || FALLBACK_IMAGE
        },
        style: {
          width: dims.width,
          height: dims.height,
          borderRadius: 10,
          backgroundColor: 'rgba(0, 0, 0, 0)'
        },
        onLoadEnd: () => setLoading(false)
        // The box already matches the natural aspect ratio, so 'cover'
        // fills it edge-to-edge with no actual cropping or letterboxing.
        ,
        resizeMode: "cover"
      })]
    })
  });
};
var _default = exports.default = CustomMessageImage;
//# sourceMappingURL=MessageImage.js.map