import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import {MomentType} from 'src/types';
import {ProfileContext} from '../../routes';

interface MomentTileProps {
  moment: MomentType;
  isProfileView: boolean;
}
const MomentTile: React.FC<MomentTileProps> = ({moment, isProfileView}) => {
  const navigation = useNavigation();

  //Username is needed by the IndividualMoment screen
  const {
    user: {username},
  } = React.useContext(ProfileContext);

  const {path_hash} = moment;
  return (
    <TouchableOpacity
      onPress={() => {
        navigation.push('IndividualMoment', {moment, isProfileView, username});
      }}>
      <View style={styles.image}>
        <Image style={styles.image} source={{uri: path_hash}} />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
  },
});
export default MomentTile;