import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Image, Text, TouchableOpacity, View} from 'react-native';
import {ScreenType} from '../../types';
import {navigateToImagePicker} from '../../utils/camera';
import {styles} from './styles';

interface GalleryIconProps {
  screenType: ScreenType;
  title: string;
  mostRecentPhotoUri: string;
}

/*
 * Displays the most recent photo in the user's gallery
 * On click, navigates to the image picker
 */
export const GalleryIcon: React.FC<GalleryIconProps> = ({
  screenType,
  title,
  mostRecentPhotoUri,
}) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity
      onPress={() =>
        navigateToImagePicker((pic) =>
          navigation.navigate('ZoomInCropper', {
            screenType,
            title,
            media: {
              filename: pic.filename,
              uri: pic.path,
              isVideo: false,
            },
          }),
        )
      }
      style={styles.saveButton}>
      {mostRecentPhotoUri !== '' ? (
        <Image
          source={{uri: mostRecentPhotoUri}}
          width={40}
          height={40}
          style={styles.galleryIcon}
        />
      ) : (
        <View style={styles.galleryIconEmpty} />
      )}
      <Text style={styles.saveButtonLabel}>Gallery</Text>
    </TouchableOpacity>
  );
};

export default GalleryIcon;