"use strict";

import React, { useEffect, useState } from 'react';
import { Container } from './StyledInputComponents/MediaComponents';
import { useDispatch } from 'react-redux';
import { setActiveFile, setActiveModal } from '../../roomStore/chatSettingsSlice';
import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
import { defaultMediaDims, fitMediaDimensions } from '../../helpers/mediaDimensions';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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] = 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] = useState(defaultMediaDims());
  const dispatch = useDispatch();
  useEffect(() => {
    if (!fileURL) {
      return;
    }
    let active = true;
    Image.getSize(fileURL, (w, h) => {
      if (active) {
        setDims(fitMediaDimensions(w, h));
      }
    }, () => {
      /* keep the default box if the size probe fails */
    });
    return () => {
      active = false;
    };
  }, [fileURL]);
  const handleOpen = () => {
    dispatch(setActiveFile({
      fileName,
      fileURL,
      mimetype
    }));
    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
  };
  return /*#__PURE__*/_jsx(Container, {
    style: {
      width: dims.width
    },
    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
      onPress: handleOpen,
      activeOpacity: 0.9,
      children: [loading && /*#__PURE__*/_jsx(View, {
        style: {
          position: 'absolute',
          width: dims.width,
          height: dims.height,
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1
        },
        children: /*#__PURE__*/_jsx(ActivityIndicator, {
          size: "small",
          color: "#0052CD"
        })
      }), /*#__PURE__*/_jsx(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"
      })]
    })
  });
};
export default CustomMessageImage;
//# sourceMappingURL=MessageImage.js.map