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

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> = ({route}) => {
  const {userId, username} = route.params;
  const [largePic, setLargePic] = React.useState('');
  const [smallPic, setSmallPic] = React.useState('');

  /**
   * Profile screen "Add Large Profile Pic Here" button
   */
  const LargeProfilePic = () => (
    <TouchableOpacity
      accessible={true}
      accessibilityLabel="ADD LARGE PROFILE PIC HERE"
      onPress={goToGalleryLargePic}
      style={styles.largeProfile}>
      {largePic ? (
        <Image
          source={{uri: largePic}}
          style={[styles.largeProfile, styles.profilePic]}
        />
      ) : (
        <Text style={styles.largeProfileText}>ADD LARGE PROFILE PIC HERE</Text>
      )}
    </TouchableOpacity>
  );

  /**
   * Profile screen "Add Smaller Profile Pic Here" button
   */
  const SmallProfilePic = () => (
    <TouchableOpacity
      accessible={true}
      accessibilityLabel="ADD SMALLER PIC"
      onPress={goToGallerySmallPic}
      style={styles.smallProfile}>
      {smallPic ? (
        <Image
          source={{uri: smallPic}}
          style={[styles.smallProfile, styles.profilePic]}
        />
      ) : (
        <Text style={styles.smallProfileText}>ADD SMALLER PIC</Text>
      )}
    </TouchableOpacity>
  );

  /*
   * 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,
      cropperToolbarTitle: 'Large profile picture',
      mediaType: 'photo',
    })
      .then((picture) => {
        if ('path' in picture) {
          setLargePic(picture.path);
        }
      })
      .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,
      cropperToolbarTitle: 'Small profile picture',
      mediaType: 'photo',
      cropperCircleOverlay: true,
    })
      .then((picture) => {
        if ('path' in picture) {
          setSmallPic(picture.path);
        }
      })
      .catch(() => {});
  };

  const handleSubmit = async () => {
    const form = new FormData();
    if (largePic) {
      form.append('largeProfilePicture', {
        uri: largePic,
        name: 'large_profile_pic.jpg',
        type: 'image/jpg',
      });
    }
    if (smallPic) {
      form.append('smallProfilePicture', {
        uri: smallPic,
        name: 'small_profile_pic.jpg',
        type: 'image/jpg',
      });
    }
    const endpoint = REGISTER_ENDPOINT + `${userId}/`;
    try {
      let response = await fetch(endpoint, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        body: form,
      });
      let data = await response.json();
      let statusCode = response.status;
      if (statusCode === 200) {
        Alert.alert(
          'Profile successfully created! 🥳',
          `Welcome to Tagg, ${username}!`,
        );
      } else if (statusCode === 400) {
        Alert.alert('Profile update failed. 😔', `${data}`);
      } else {
        Alert.alert(
          'Something went wrong! 😭',
          "Would you believe me if I told you that I don't know what happened?",
        );
      }
    } catch (error) {
      Alert.alert(
        'Profile creation failed 😓',
        'Please double-check your network connection and retry.',
      );
      return {
        name: 'Profile creation error',
        description: error,
      };
    }
  };

  return (
    <Background centered>
      <StatusBar barStyle="light-content" />
      <LargeProfilePic />
      <SmallProfilePic />
      <View style={styles.dummyField}>
        <Text>DUMMY WEBSITE</Text>
      </View>
      <View style={styles.dummyField}>
        <Text>DUMMY BIO</Text>
      </View>
      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
        <Text style={styles.submitBtnLabel}>Let's start!</Text>
      </TouchableOpacity>
    </Background>
  );
};

const styles = StyleSheet.create({
  largeProfile: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,
    height: 230,
    width: 230,
    borderRadius: 23,
    backgroundColor: '#fff',
    marginRight: '6%',
  },
  largeProfileText: {
    textAlign: 'center',
    fontSize: 14,
    fontWeight: 'bold',
    color: '#863FF9',
  },
  smallProfile: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    height: 110,
    width: 110,
    borderRadius: 55,
    backgroundColor: '#E1F0FF',
    marginLeft: '45%',
    bottom: '7%',
  },
  smallProfileText: {
    textAlign: 'center',
    fontSize: 14,
    fontWeight: 'bold',
    color: '#806DF4',
  },
  profilePic: {
    marginRight: 0,
    marginLeft: 0,
    bottom: 0,
  },
  dummyField: {
    height: '10%',
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: '10%',
  },
  submitBtn: {
    backgroundColor: '#8F01FF',
    justifyContent: 'center',
    alignItems: 'center',
    width: 150,
    height: 40,
    borderRadius: 5,
  },
  submitBtnLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#fff',
  },
});

export default Profile;