import {RouteProp, useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {
  Alert,
  Image,
  ImageBackground,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import {Text} from 'react-native-animatable';
import {TouchableOpacity} from 'react-native-gesture-handler';
import ImagePicker from 'react-native-image-crop-picker';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import {MainStackParams} from 'src/routes';
import {UniversityType} from '../../types';
import FrontArrow from '../../assets/icons/front-arrow.svg';
import {TaggSquareButton, UniversityIcon} from '../../components';
import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
import {SP_HEIGHT, SP_WIDTH} from '../../constants';
import {
  ERROR_UPLOAD,
  ERROR_UPLOAD_SP_PHOTO,
  SUCCESS_PIC_UPLOAD,
} from '../../constants/strings';
import {
  getSuggestedPeopleProfile,
  sendSuggestedPeoplePhoto,
} from '../../services';
import {uploadedSuggestedPeoplePhoto} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

type SuggestedPeopleUploadPictureScreenRouteProp = RouteProp<
  MainStackParams,
  'UpdateSPPicture'
>;

type SuggestedPeopleUploadPictureScreenProps = {
  route: SuggestedPeopleUploadPictureScreenRouteProp;
};

const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureScreenProps> = ({
  route,
}) => {
  const {editing} = route.params;
  const [image, setImage] = useState<string | undefined>(undefined);
  const [oldImage, setOldImage] = useState<string | undefined>(undefined);
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const {
    user: {userId: loggedInUserId},
    profile: {university = UniversityType.Empty},
  } = useSelector((state: RootState) => state.user);

  useEffect(() => {
    const loadData = async () => {
      const response = await getSuggestedPeopleProfile(loggedInUserId);
      if (response) {
        setImage(response.suggested_people_url);
        setOldImage(response.suggested_people_url);
      }
    };
    // if we're in edit SP, attempt to load current sp image
    if (editing) {
      loadData();
    }
  }, []);

  const openImagePicker = () => {
    ImagePicker.openPicker({
      smartAlbums: [
        'Favorites',
        'RecentlyAdded',
        'SelfPortraits',
        'Screenshots',
        'UserLibrary',
      ],
      width: SP_WIDTH,
      height: SP_HEIGHT,
      cropping: true,
      cropperToolbarTitle: 'Select Photo',
      mediaType: 'photo',
    })
      .then((picture) => {
        if ('path' in picture) {
          setImage(picture.path);
        }
      })
      .catch((_) => {});
  };

  const uploadImage = async () => {
    // Uploading image only if initially loaded image is not the same as the image being uploaded
    if (image && oldImage !== image) {
      setLoading(true);
      const success = await sendSuggestedPeoplePhoto(image);
      if (success) {
        dispatch(uploadedSuggestedPeoplePhoto(image));
        if (!editing) {
          navigation.navigate('BadgeSelection', {editing: false});
        }
      } else {
        Alert.alert(ERROR_UPLOAD);
      }
      setLoading(false);
      // Navigated back to Profile if user is editing their Suggested People Picture
      if (editing) {
        navigation.goBack();
        setTimeout(() => {
          Alert.alert(success ? SUCCESS_PIC_UPLOAD : ERROR_UPLOAD_SP_PHOTO);
        }, 500);
      }
    }
  };

  return (
    <>
      {loading && <TaggLoadingIndicator fullscreen />}
      <StatusBar barStyle={'light-content'} />
      <SafeAreaView style={styles.container}>
        <Text style={editing ? styles.titleEditSuggested : styles.titlePHOTO}>
          {editing ? 'Edit Suggested' : 'PHOTO'}
        </Text>
        {image ? (
          <Text style={styles.body}>
            {editing
              ? 'Tap to upload new photo'
              : 'Tap again to choose another photo'}
          </Text>
        ) : (
          <Text style={styles.body}>
            Upload a photo, this is what other users will see
          </Text>
        )}
        {image ? (
          <TouchableOpacity onPress={openImagePicker}>
            <ImageBackground
              source={{uri: image, cache: 'reload'}}
              style={[styles.imageContainer, styles.overlay]}
              borderRadius={30}>
              <Image
                style={styles.overlay}
                source={require('../../assets/images/suggested-people-preview-silhouette.png')}
              />
            </ImageBackground>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity onPress={openImagePicker}>
            <ImageBackground
              source={require('../../assets/images/suggested-people-preview-silhouette.png')}
              style={[styles.imageContainer, styles.overlay]}>
              <Image
                style={styles.images}
                source={require('../../assets/images/images.png')}
              />
              <Text style={styles.body}>Upload Photo</Text>
            </ImageBackground>
          </TouchableOpacity>
        )}
        {editing && (
          <TouchableOpacity
            onPress={() => {
              navigation.navigate('BadgeSelection', {editing: true});
            }}>
            <View style={styles.editBadgesMainContainer}>
              <View style={styles.editBadgesSubContainer}>
                <UniversityIcon
                  university={university}
                  imageStyle={{width: normalize(16), height: normalize(20)}}
                />
                <Text style={styles.editBadgesText}>Edit Badges</Text>
              </View>
              <FrontArrow style={styles.rightArrow} />
            </View>
          </TouchableOpacity>
        )}
        {image && (
          <TaggSquareButton
            onPress={uploadImage}
            title={'Done'}
            buttonStyle={'normal'}
            buttonColor={editing ? 'blue' : 'purple'}
            labelColor={'white'}
            style={styles.buttonStyle}
            labelStyle={styles.buttonLabel}
          />
        )}
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: '#878787',
    alignItems: 'center',
  },
  titlePHOTO: {
    marginTop: '5%',
    fontSize: normalize(25),
    lineHeight: normalize(30),
    fontWeight: '600',
    color: 'white',
  },
  titleEditSuggested: {
    marginTop: '5%',
    fontSize: normalize(19),
    lineHeight: normalize(22.7),
    letterSpacing: normalize(0.1),
    fontWeight: '600',
    color: 'white',
  },
  body: {
    fontSize: normalize(15),
    lineHeight: normalize(18),
    textAlign: 'center',
    fontWeight: '600',
    color: 'white',
    marginTop: '2%',
    width: SCREEN_WIDTH * 0.7,
  },
  buttonLabel: {
    fontWeight: '600',
    fontSize: normalize(15),
  },
  buttonStyle: {
    width: '40%',
  },
  imageContainer: {
    marginTop: '10%',
    backgroundColor: 'black',
    borderRadius: 30,
    alignItems: 'center',
  },
  overlay: {
    height: SCREEN_HEIGHT * 0.6,
    aspectRatio: SP_WIDTH / SP_HEIGHT,
  },
  images: {
    width: normalize(100),
    height: normalize(100),
    marginTop: '30%',
    marginBottom: '10%',
  },
  rightButtonContainer: {marginRight: 24},
  rightButton: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    fontSize: 15,
    lineHeight: 18,
  },
  editBadgesMainContainer: {
    height: 30,
    flexDirection: 'row',
    width: SCREEN_WIDTH * 0.6,
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '4%',
    marginTop: '0.8%',
  },
  editBadgesSubContainer: {flexDirection: 'row', alignItems: 'center'},
  editBadgesText: {
    color: 'white',
    fontWeight: '600',
    fontSize: normalize(14),
    lineHeight: normalize(16.71),
    textAlign: 'left',
    marginLeft: 18,
  },
  rightArrow: {
    width: 20,
    height: 20,
    alignSelf: 'center',
  },
});
export default SuggestedPeopleUploadPictureScreen;
