import React, { useEffect, useState } from 'react';
import { Alert, Dimensions, StyleSheet, View } from 'react-native';
import 'react-native-get-random-values';
import { Text } from 'react-native-paper';
import { UnAuthStackNavigationProp } from '../../navigation/UnauthorizedNavigator';
import { PrimaryButton } from '../Buttons';
import UnauthorizedLayout from './AuthLayout';
import RegisterCredentials from './RegistrationSteps/RegisterCredential';
import RegisterImage from './RegistrationSteps/RegisterImage';
import RegisterMeasurements from './RegistrationSteps/RegisterMeasurements';
import RegisterPassword from './RegistrationSteps/RegisterPassword';

/**
 * {@link RegisterMain} component props.
 */
export interface RegisterProps {
  /**The navigation object used to interact with the {@link Auth} navigator.*/
  navigation: UnAuthStackNavigationProp
}

export interface RegisterStepProps {
  changeStep: (stepNumber: number, stepSubtitleText: string) => void;
  setFormValues: (formValues: RegisterFormValues) => void
  formValues: RegisterFormValues
}

export interface RegisterFormValues {
  username?: string;
  email?: string;
  password?: string;
  confirmPassword?: string;
  sagitta?: false
  height?: string;
  weight?: string;
}

/**
 * The main registration component. Acts as a backdrop for all intermediate registration steps. 
 * **Note: The registration components make heavy use of a library called Formik in order to created validated forms. It's recommended to check out the docs for that 
 * (https://formik.org/docs/guides/react-native)**
 * @category Unauthorized
 * @subcategory Registration
 * @component
 */
export const RegisterMain : React.FC<RegisterProps> = ({navigation}) => {
  
  /**Holds an integer value that maps to a step in the registration process. 
   * The mapping is as follows:
   * - 1 -> Username and Email 
   * - 2 -> Password
   * - 3 -> Sagitta and Measurements
   * - 4 -> Profile picture and submission
   * - 5 -> Result
   */
  const stepState = 1;
  const [step, setStep] = useState(stepState);
  /**
   * Holds the current subtitle text.
   */

  const subTitleState = "Let's start with some basic account information.";
  const [subtitle, setSubtitle] = useState<string>(subTitleState);

  /**
   * An object containing all the current form values
   */
  const [formValues, setFormValues] = useState<RegisterFormValues>({}); 

  useEffect(() => {
      /**
       * Handler that intercepts a request to leave the registration screen and asks the user to confirm that they want to leave.
       * If they confirm they want to leave, all registration state will reset and the user will be directed back to {@link Intro}.
       * @memberOf RegisterMain
       */
      const preventExitFromRegistration = navigation.addListener('beforeRemove', (e) => {
        // make sure we aren't at the last step for some reason
        if (step != 5) {    
          e.preventDefault();
          
          // display an "Are you sure?" alert
           Alert.alert(
            'Going so soon?',
            'Are you sure you want to cancel registration?',
            [
              { text: "Don't leave", style: 'cancel', onPress: () => {} },
              {
                text: 'Discard',
                style: 'destructive',
                onPress: () => {
                  // if they are sure, reset the form and take them back to the intro
                  setFormValues({});
                  navigation.dispatch(e.data.action)
                },
              },
            ]
          );
        }
      })
      return preventExitFromRegistration;
    }, [navigation, step]);

  /**
   * Changes the registration step to the given value.
   */
  const changeStep = (step: any, subtitle: any) => {
    setStep(step);
    setSubtitle(subtitle);
    console.log("Changing to registration step " + step + " with subtitle:" + subtitle)
  }

  /**
   * Returns to the intro screen.
   */
  const finish = () => {
    navigation.pop();
    console.log("Going back to intro screen from registration")
  }

  return (
    <UnauthorizedLayout>
      <View style={styles.brandContainer}>
        {step != 5 ?
        <Text style={styles.title} >Welcome!</Text> : null}
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
      <View>{
        step == 1 ? <RegisterCredentials setFormValues={setFormValues} formValues={formValues} changeStep={changeStep}/> : 
        step == 2 ? <RegisterPassword setFormValues={setFormValues} formValues={formValues} changeStep={changeStep}/> : 
        step == 3 ? <RegisterMeasurements setFormValues={setFormValues} formValues={formValues} changeStep={changeStep}/> : 
        step == 4 ? <RegisterImage setFormValues={setFormValues} formValues={formValues} changeStep={changeStep} /> :
        step == 5 ? <PrimaryButton style={{marginTop: 30}} text="Okay" onPress={finish} /> : null}
      </View>
    </UnauthorizedLayout>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    flex: 1,
    justifyContent: 'flex-start',
    resizeMode: 'cover',
  },
  brandContainer: {
    marginTop: 60,  
    marginHorizontal: 25,
    flexDirection: 'column',
    justifyContent: 'space-evenly'
  },
  title: {
    color: 'white',
    fontSize: 20
  },

  subtitle: {
    color: 'white',
    fontSize: 15,
    marginTop: 20
  },
});
 