import React from 'react';
import { ImageZoom } from '@likashefqet/react-native-image-zoom';
import { Meme } from '../../database';
import { View } from 'react-native';
import styles from '../../styles';
import LoadingView from '../loadingView';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { useImageDimensions } from '@react-native-community/hooks';

const MemeViewItem = ({ meme }: { meme: Meme }) => {
  const { height, width } = useSafeAreaFrame();

  const { dimensions, loading, error } = useImageDimensions({ uri: meme.uri });

  if (loading || error || !dimensions) return <LoadingView />;

  return (
    <View style={[{ width, height }, styles.center]}>
      <ImageZoom
        source={{ uri: meme.uri }}
        style={
          dimensions.aspectRatio > width / (height - 128)
            ? {
                width,
                height: width / (dimensions.width / dimensions.height),
              }
            : {
                width: (height - 128) * (dimensions.width / dimensions.height),
                height: height - 128,
              }
        }
        minScale={0.5}
      />
    </View>
  );
};

export default MemeViewItem;