import CameraRoll from '@react-native-community/cameraroll';
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
import {RouteProp} from '@react-navigation/core';
import {useFocusEffect} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {createRef, useCallback, useEffect, useState} from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {CameraType, FlashMode, RNCamera} from 'react-native-camera';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {
  FlashButton,
  FlipButton,
  GalleryIcon,
  SaveButton,
  TaggSquareButton,
} from '../../components';
import {MainStackParams} from '../../routes';
import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
import {showGIFFailureAlert, takePicture} from '../../utils/camera';

type CameraScreenRouteProps = RouteProp<MainStackParams, 'CameraScreen'>;
export type CameraScreenNavigationProps = StackNavigationProp<
  MainStackParams,
  'CameraScreen'
>;
interface CameraScreenProps {
  route: CameraScreenRouteProps;
  navigation: CameraScreenNavigationProps;
}
const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
  const {title, screenType} = route.params;
  const cameraRef = createRef<RNCamera>();
  const tabBarHeight = useBottomTabBarHeight();
  const [cameraType, setCameraType] = useState<keyof CameraType>('front');
  const [flashMode, setFlashMode] = useState<keyof FlashMode>('off');
  const [capturedImage, setCapturedImage] = useState<string>('');
  const [mostRecentPhoto, setMostRecentPhoto] = useState<string>('');
  const [showSaveButton, setShowSaveButton] = useState<boolean>(false);

  useFocusEffect(
    useCallback(() => {
      navigation.dangerouslyGetParent()?.setOptions({
        tabBarVisible: false,
      });
      return () => {
        navigation.dangerouslyGetParent()?.setOptions({
          tabBarVisible: true,
        });
      };
    }, [navigation]),
  );

  /*
   *  Chooses the last picture from gallery to display as the gallery button icon
   */
  useEffect(() => {
    CameraRoll.getPhotos({first: 1})
      .then((lastPhoto) => {
        if (lastPhoto.edges.length > 0) {
          const image = lastPhoto.edges[0].node.image;
          setMostRecentPhoto(image.uri);
        }
      })
      .catch((_err) =>
        console.log('Unable to fetch preview photo for gallery'),
      );
  }, [capturedImage]);

  const navigateToCropper = (uri: string) => {
    navigation.navigate('ZoomInCropper', {
      screenType,
      title,
      media: {
        uri,
        isVideo: false,
      },
    });
  };

  const navigateToCaptionScreen = () => {
    navigation.navigate('CaptionScreen', {
      screenType,
      title,
      media: {
        uri: capturedImage,
        isVideo: false,
      },
    });
  };

  /*
   * If picture is not taken yet, exists from camera screen to profile view
   * If picture is taken, exists from captured image's preview to camera
   * */
  const handleClose = () => {
    if (showSaveButton) {
      cameraRef.current?.resumePreview();
      setShowSaveButton(false);
      setCapturedImage('');
    } else {
      navigation.goBack();
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
        <CloseIcon height={25} width={25} color={'white'} />
      </TouchableOpacity>
      <FlashButton flashMode={flashMode} setFlashMode={setFlashMode} />
      <RNCamera
        ref={cameraRef}
        style={styles.camera}
        type={cameraType}
        flashMode={flashMode}
      />
      <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
        {showSaveButton ? (
          <SaveButton capturedImageURI={capturedImage} />
        ) : (
          <FlipButton cameraType={cameraType} setCameraType={setCameraType} />
        )}
        <TouchableOpacity
          onPress={() =>
            takePicture(cameraRef, (pic) => {
              setShowSaveButton(true);
              setCapturedImage(pic.uri);
            })
          }
          style={styles.captureButtonContainer}>
          <View style={styles.captureButton} />
        </TouchableOpacity>
        <View style={styles.bottomRightContainer}>
          {capturedImage ? (
            <TaggSquareButton
              onPress={navigateToCaptionScreen}
              title={'Next'}
              buttonStyle={'large'}
              buttonColor={'blue'}
              labelColor={'white'}
              style={styles.nextButton}
              labelStyle={styles.nextButtonLabel}
            />
          ) : (
            <GalleryIcon
              mostRecentPhotoUri={mostRecentPhoto}
              callback={(pic) => {
                const filename = pic.filename;
                if (
                  filename &&
                  (filename.endsWith('gif') || filename.endsWith('GIF'))
                ) {
                  showGIFFailureAlert(() => navigateToCropper(pic.path));
                } else {
                  navigateToCropper(pic.path);
                }
              }}
            />
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  camera: {
    flex: 1,
    justifyContent: 'space-between',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  captureButtonContainer: {
    alignSelf: 'center',
    backgroundColor: 'transparent',
    borderRadius: 100,
    borderWidth: 4,
    borderColor: '#fff',
    width: 93,
    height: 93,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  captureButton: {
    backgroundColor: '#fff',
    width: 68,
    height: 68,
    borderRadius: 74,
  },
  closeButton: {
    position: 'absolute',
    top: 0,
    paddingTop: HeaderHeight,
    zIndex: 1,
    marginLeft: '5%',
  },
  bottomContainer: {
    position: 'absolute',
    width: SCREEN_WIDTH,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  bottomRightContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: (SCREEN_WIDTH - 100) / 2,
  },
  nextButton: {
    zIndex: 1,
    width: normalize(100),
    height: normalize(37),
    borderRadius: 10,
  },
  nextButtonLabel: {
    fontWeight: '700',
    fontSize: normalize(15),
    lineHeight: normalize(17.8),
    letterSpacing: normalize(1.3),
    textAlign: 'center',
  },
});

export default CameraScreen;