import React from 'react';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {
  View,
  Text,
  StatusBar,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';
import {RootStackParamList} from '../../routes';
import {Background} from '../../components';
import ImagePicker from 'react-native-image-crop-picker';

type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>;
type ProfileScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Profile'
>;
interface ProfileProps {
  route: ProfileScreenRouteProp;
  navigation: ProfileScreenNavigationProp;
}

/**
 * Create Profile screen for onboarding.
 * @param navigation react-navigation navigation object.
 */

const Profile: React.FC<ProfileProps> = ({}) => {
  const [largePicture, setLargePicture] = React.useState({
    path: '',
    height: 0,
    width: 0,
  });
  const [smallPicture, setSmallPicture] = React.useState({
    path: '',
    height: 0,
    width: 0,
  });
  const [showLargeText, setShowLargeText] = React.useState(true);
  const [showSmallText, setShowSmallText] = React.useState(true);

  /**
   * Profile screen "Add Large Profile Pic Here" button
   */
  const LargeProfilePic = () => (
    <View style={styles.container}>
      <View style={styles.largeButton}>
        <TouchableOpacity
          accessible={true}
          accessibilityLabel="ADD LARGE PROFILE PIC HERE"
          onPress={goToGalleryLargePic}
          style={styles.largeButtonContainer}>
          {showLargeText ? (
            <Text style={styles.addLargeProfilePicText}>
              ADD LARGE PROFILE PIC HERE
            </Text>
          ) : null}

          {largePicture.path !== '' && (
            <Image
              source={{uri: largePicture.path}}
              style={styles.largeProfilePic}
            />
          )}
        </TouchableOpacity>
      </View>
    </View>
  );

  /**
   * Profile screen "Add Smaller Profile Pic Here" button
   */
  const SmallProfilePic = () => (
    <View style={styles.container}>
      <View style={styles.smallButton}>
        <TouchableOpacity
          accessible={true}
          accessibilityLabel="ADD SMALLER PIC"
          onPress={goToGallerySmallPic}>
          {showSmallText ? (
            <Text style={styles.addSmallProfilePicText}>ADD SMALLER PIC</Text>
          ) : null}

          {smallPicture.path !== '' && (
            <Image
              source={{uri: smallPicture.path}}
              style={styles.smallProfilePic}
            />
          )}
        </TouchableOpacity>
      </View>
    </View>
  );

  /*
   * Handles tap on add profile picture buttons by navigating to camera access
   * and selecting a picture from gallery for large profile picture
   */
  const goToGalleryLargePic = () => {
    ImagePicker.openPicker({
      width: 580,
      height: 580,
      cropping: true,
      cropperCircleOverlay: true,
    })
      .then((picture) => {
        if ('path' in picture) {
          setLargePicture({
            path: picture.path,
            height: picture.height,
            width: picture.width,
          });
          setShowLargeText(false);
        }
      })
      .catch(() => {});
  };

  /*
   * Handles tap on add profile picture buttons by navigating to camera access
   * and selecting a picture from gallery for small profile picture
   */
  const goToGallerySmallPic = () => {
    ImagePicker.openPicker({
      width: 580,
      height: 580,
      cropping: true,
      cropperCircleOverlay: true,
    })
      .then((picture) => {
        if ('path' in picture) {
          setSmallPicture({
            path: picture.path,
            height: picture.height,
            width: picture.width,
          });
          setShowSmallText(false);
        }
      })
      .catch(() => {});
  };

  return (
    <Background>
      <StatusBar barStyle="light-content" />
      <LargeProfilePic />
      <SmallProfilePic />
    </Background>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  largeButtonContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  largeButton: {
    padding: 5,
    height: 180,
    width: 180,
    borderRadius: 400,
    backgroundColor: '#fff',
    alignItems: 'center',
    marginTop: '100%',
    marginRight: '12%',
    zIndex: 2,
  },
  addLargeProfilePicText: {
    fontWeight: 'bold',
    padding: 22,
    fontSize: 12,
    color: '#863FF9',
    textAlign: 'center',
  },
  largeProfilePic: {
    height: 180,
    width: 180,
    borderRadius: 400,
  },
  smallButton: {
    position: 'relative',
    padding: 5,
    height: 110,
    width: 110,
    borderRadius: 400,
    backgroundColor: '#E1F0FF',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
    marginTop: '128%',
    marginLeft: '30%',
  },
  addSmallProfilePicText: {
    fontWeight: 'bold',
    padding: 10,
    fontSize: 12,
    color: '#806DF4',
    textAlign: 'center',
  },
  smallProfilePic: {
    height: 110,
    width: 110,
    borderRadius: 400,
  },
});

export default Profile;