import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import React from 'react';
import {Image, Dimensions, Text} from 'react-native';
import ImageZoom from 'react-native-image-pan-zoom';
import {SCREEN_WIDTH} from '../../utils';
import {MainStackParams} from '../../routes';

type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;

interface ZoomInCropperProps {
  route: ZoomInCropperRouteProps;
}

export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({route}) => {
  return (
    <ImageZoom
      cropWidth={Dimensions.get('window').width}
      cropHeight={Dimensions.get('window').height}
      imageWidth={200}
      imageHeight={200}>
      <Image
        style={{width: 200, height: 200}}
        source={{
          uri: route.params.imageURI,
        }}
      />
    </ImageZoom>
  );
};