import axios from 'axios';
import React, { useState } from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import 'react-native-get-random-values';
import { ActivityIndicator, Text } from 'react-native-paper';
import { API_URL, reportAxiosError } from '../../../utils/RequestUtils';
import { PrimaryButton, SecondaryButton } from '../../Buttons';
import { PhotoPicker } from '../../PhotoPicker';
import { Separator } from '../../Separator';
import { RegisterStepProps } from '../RegisterMain';

/**
 * This component displays an interface to upload their profile picture
 */
const RegisterImage: React.FC<RegisterStepProps> = ({changeStep, formValues}) => {
  /**
   * Stores the base64 of the user's selected profile pic
   */ 
  const [photoBase64, setPhotoBase64] = useState<string>();
  /**
   * This flag is set to true when the registration submission is being processed. An activity spinner will display while it is true
   */ 
  const [loadingSubmission, toggleLoading] = useState<boolean>(false);
  /**
   * This flag toggles the menu that is used to choose a photo source (Library or Camera).
   */ 
  const [photoSourceMenuOpened, togglePhotoSourceMenu] = useState<boolean>(false)

  /**
     * Reverse back to measurements step
     */ 
  const back = () => {
    console.log("Registration form values updated")
    changeStep(3, "Will you be using a Sagitta?")
  }

  /**
   * Prepares and sends a registration request to the api
   */ 
  const register = async () => {
    // toggle the loading flag and change status
    toggleLoading(true);
    changeStep(4, 'Hang tight for a moment while we create your account.')

    // create FormData and send request
    const formData = prepareFormData()    
    await sendRegisterRequest(formData)
  }

  // Returns a FormData object containing all the form values from each registration step, including the image (in b64) chosen on this step
  const prepareFormData = (): FormData =>  {
    console.log("Preparing form data...")
    let formData = new FormData();
    let processedFormValues;
    if (formValues.height && formValues.weight) {
      processedFormValues = {...formValues, height: parseFloat(formValues.height), weight: parseFloat(formValues.weight)}
    }
    else {
      processedFormValues = {
        email: formValues.email,
        username: formValues.username,
        password: formValues.password,
      };
    }
    formData.append('userInfo', JSON.stringify(processedFormValues));
    formData.append('avatar', 'data:image/png;base64,' + photoBase64);

    console.log("Form data prepared")
    return formData
  }

  const sendRegisterRequest = async (formData: FormData) => {
    // initialize registration result message
    let resultMessage = '';

    console.log("Sending registration request...")
    // send request, notify user of result

    try {
      const response = await axios({
        method: 'post',
        url: API_URL + '/api/register/',
        timeout: 50000,
        data: formData,
      });
      if (response.status == 200) {
        resultMessage = 'Success! Congratulations on registering for your new account, you can now login!';  
      }
      else {
        resultMessage = 'Something went wrong when trying to set up your account. Please try again.'; // TODO: add contact details?  
      }
      
    } catch (error) {
      resultMessage = 'Something went wrong when trying to set up your account. Please try again.'; // TODO: add contact details?
      reportAxiosError('Something went wrong with user registration', error);
    }
    toggleLoading(false);
    changeStep(5, resultMessage); 
  }

  return (
    <View>
      { !loadingSubmission ?
      <View>
        <TouchableOpacity onPress={() => togglePhotoSourceMenu(true)} style={{justifyContent: 'center', }}>
          { photoBase64 != null ?
          <Image style={{alignSelf: 'center', borderRadius: 100, width: 200, height: 200, marginBottom: 5, marginTop: 30,}} source={{uri: 'data:image/png;base64,' + photoBase64}} /> :
          <Image style={{alignSelf: 'center', borderRadius: 100, width: 200, height: 200, marginBottom: 5, marginTop: 30,}} source={require('../../../../assets/default-pfp.png')} /> 
          }   
          <Text style={{alignSelf: 'center', marginVertical: 20, color: 'white'}}>Choose photo</Text>
        </TouchableOpacity>
        <View style={{margin: 20}}>
          <Separator color="lightgray" />
          <PrimaryButton text="Register" onPress={register} style={{marginVertical: 20}} />
          <SecondaryButton text="Back" onPress={back} style={{marginBottom: 20}} />
        </View> 
      </View>
      : 
      <View>
          <ActivityIndicator style={{marginTop: 200}} size="large" animating={true} color="red"/>
      </View>}
      <PhotoPicker menuType='alert' multiple={false} photoSourceMenuOpened={photoSourceMenuOpened} cancel={() => togglePhotoSourceMenu(false)} onReceivedPhotoResult={result => setPhotoBase64(result.base64)}/>
    </View>
    
  )
}
 
export default RegisterImage;
 