Untitled

import {
  ActivityIndicator,
  Dimensions,
  Image,
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { getItemFromAsyncStorage } from '../../stores/asyncStorage';
import { useEffect, useState } from 'react';
import theme from '../../utils/theme';
import {
  fetchThemeColorsForOrganization,
  globalTheme,
  Theme,
} from '../../theme-provider';
import {
  cacheImageWithExpiration,
  clearExpiredImages,
  getCachedImage,
} from '../../utils/image-cache-manager';
import RNFetchBlob from 'rn-fetch-blob';
import { IAttachment, ICommunity, IMessage } from '../../types/Communities';
import { getAttachmentInfo } from '../../stores/slices/communities';
import ImageViewer from 'react-native-image-zoom-viewer';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useGlobalImageViewer } from '../GlobalImageViewer';
import SkeletonBox from '../SkeletonBox';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

interface AttachmentInterface {
  location: string;
  showPlaceholder?: boolean;
}

const AttachmentImage: React.FC<AttachmentInterface> = ({
  location,
  showPlaceholder,
}) => {
  const [attachmentImage, setAttachmentImage] = useState<string | null>(null);
  const [imageHeight, setImageHeight] = useState<any>();
  const [placeholderClicked, setPlaceholderClicked] = useState<boolean>(false);
  const { setImages, setVisible } = useGlobalImageViewer();

  useEffect(() => {
    fetchAttachmentImage();
    setTimeout(() => {
      try {
        let thumbnail = JSON.parse(location).thumbnail;
        setAttachmentImage(thumbnail);
      } catch (err: any) {}
    }, 2000);
  }, []);

  const fetchAttachmentImage = async () => {
    const accessToken = await getItemFromAsyncStorage('afasAccessToken');
    let thumbnail = JSON.parse(location).thumbnail;

    try {
      const response = await RNFetchBlob.config({
        fileCache: true,
      }).fetch('GET', thumbnail, {
        Authorization: `Bearer ${accessToken}`,
      });

      const imagePath = response.path(); // Get the local path of the downloaded image
      const base64Str = await RNFetchBlob.fs.readFile(imagePath, 'base64'); // Read the image file and convert it to base64
      setAttachmentImage(`data:image/png;base64,${base64Str}`);
      const windowWidth = Dimensions.get('window').width;
      Image.getSize(thumbnail, (width, height) => {
        if (width == 0 || height == 0) return;
        setImageHeight(Math.round((height * 200) / width));
      });
    } catch (error) {
      console.error('Error fetching image:', error);
    }
  };

  const openImageInGalleryView = () => {
    let image = JSON.parse(location).image;
    setImages([image]);
    setVisible(true);
  };

  const shouldShowImage = () => {
    if (Platform.OS == 'ios') return true;
    const showImage = !showPlaceholder;
    if (showPlaceholder && placeholderClicked) return true;

    return showImage;
  };

  const styles = StyleSheet.create({
    container: {
      width: '100%',
      marginVertical: theme.spacing[2],
    },
    image: {
      //resizeMode: 'contain', // Ensure the entire image is visible while maintaining aspect ratio
    },
    placeholder: {
      backgroundColor: '#c9c8c5',
      width: '100%',
      height: 200,
      position: 'relative',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: theme.spacing[2],
    },
    iconText: {
      alignItems: 'center',
    },
  });

  return (
    <View>
      {/* {showPlaceholder && !placeholderClicked && !shouldShowImage() && (
        <TouchableOpacity onPress={() => setPlaceholderClicked(true)}>
          <View style={styles.placeholder}>
            <View style={styles.iconText}>
              <MaterialCommunityIcons name="image" size={50} color="grey" />
              <Text>Klik om de afbeelding weer te geven</Text>
            </View>
          </View>
        </TouchableOpacity>
      )} */}
      {shouldShowImage() && attachmentImage && (
        <View>
          {attachmentImage && imageHeight && (
            <TouchableOpacity onPress={() => openImageInGalleryView()}>
              <View style={styles.container}>
                <Image
                  source={{ uri: attachmentImage }}
                  style={{
                    width: 200,
                    height: imageHeight,
                  }}
                />
              </View>
            </TouchableOpacity>
          )}
        </View>
      )}
    </View>
  );
};

export { AttachmentImage };