import {RouteProp} from '@react-navigation/core';
import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useCallback, useRef, useState} from 'react';
import {Button, StatusBar, View} from 'react-native';
import {CropView} from 'react-native-image-crop-tools';
import {MainStackParams} from '../../routes';
import {HeaderHeight} from '../../utils';

type ImageCropperRouteProps = RouteProp<MainStackParams, 'ImageCropper'>;

type ImageCropperNavigationProps = StackNavigationProp<
  MainStackParams,
  'ImageCropper'
>;

interface ImageCropperProps {
  route: ImageCropperRouteProps;
  navigation: ImageCropperNavigationProps;
}

const ImageCropper: React.FC<ImageCropperProps> = ({route, navigation}) => {
  const {image, title, screenType} = route.params;
  const cropViewRef = useRef();
  const aspectRatios = [
    {width: 9, height: 16},
    {width: 4, height: 5},
    {width: 1, height: 1},
  ];
  const [aspectRatioIndex, setAspectRatioIndex] = useState<number>(0);
  //Function to get the parent TabBar navigator and setting the option for this screen.
  useFocusEffect(
    useCallback(() => {
      navigation.dangerouslyGetParent()?.setOptions({
        tabBarVisible: false,
      });
      return () => {
        navigation.dangerouslyGetParent()?.setOptions({
          tabBarVisible: true,
        });
      };
    }, [navigation]),
  );
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View
        style={{
          flex: 1,
          paddingTop: HeaderHeight,
        }}>
        <Button
          title={'Toggle Ratio'}
          onPress={() => {
            setAspectRatioIndex(
              aspectRatioIndex < 2 ? aspectRatioIndex + 1 : 0,
            );
          }}
        />
        <Button
          title={'Done'}
          onPress={() => {
            if (cropViewRef && cropViewRef.current) {
              cropViewRef.current.saveImage(100);
            }
          }}
        />
        {image !== undefined && (
          <CropView
            sourceUrl={image.sourceURL ? image.sourceURL : ''}
            style={{
              position: 'relative',
              flex: 1,
              marginBottom: '3%',
            }}
            onImageCrop={(res) => {
              const arr = res.uri.split('/');
              navigation.navigate('CaptionScreen', {
                screenType,
                title,
                image: {filename: arr[arr.length - 1], path: res.uri},
              });
            }}
            keepAspectRatio
            aspectRatio={aspectRatios[aspectRatioIndex]}
            ref={cropViewRef}
          />
        )}
      </View>
    </>
  );
};

export default ImageCropper;