import { Formik } from 'formik';
import React from 'react';
import { Dimensions, StyleSheet, TextInput, View } from 'react-native';
import 'react-native-get-random-values';
import { Text } from 'react-native-paper';
import { credsSchema, RegisterCredsValues } from '../../../utils/RegistrationUtils';
import { PrimaryButton } from '../../Buttons';
import { RegisterStepProps } from '../RegisterMain';

/**
 * This component displays a form for the new user's email and password to-be.
 */
const RegisterCredentials: React.FC<RegisterStepProps> = ({changeStep, setFormValues, formValues}) => {
    /**
   * The initial measurement values are set to the current email and username values of the parent form data object
   */
    const initialValues: RegisterCredsValues = {email: formValues.email, username: formValues.username};

    /* 
    * Updates the form values and progresses to the password step
    */
    const next = (newFormValues: RegisterCredsValues) => {
      setFormValues({...formValues, email: newFormValues.email, username: newFormValues.username});
      console.log("Registration form values updated")
      changeStep(2, "Next, we'll have you set a password.");
    }
  
    return (
        <Formik 
            initialValues={initialValues}
            validationSchema={credsSchema}
            enableReinitialize={true}
            onSubmit={values => next(values)}>
            {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
              <View style={{margin: 20}}>
                  <TextInput 
                    style={styles.textInput}
                    placeholder="Username" 
                    value={values.username}
                    onChangeText={handleChange('username')}
                    onBlur={handleBlur('username')} />
                  {errors.username && touched.username ? <Text style={styles.errorText}>{errors.username}</Text> : null}
                  <TextInput 
                    style={styles.textInput}
                    placeholder="Email" 
                    value={values.email}
                    onChangeText={handleChange('email')} 
                    onBlur={handleBlur('email')} />
                  {errors.email && touched.email ? <Text style={styles.errorText}>{errors.email}</Text> : null}
                  <PrimaryButton style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>
              </View>
            )}
        </Formik>
    ) 
}

const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      flex: 1,
      justifyContent: 'flex-start',
      resizeMode: 'cover',
    },
  
    textContainer: { 
      marginHorizontal: 20,
      marginBottom: 30,
      borderRadius: 50,
    },
  
    textInput: {
      marginVertical: 7,
      paddingLeft: 30,
      borderRadius: 50,
      overflow: 'hidden',
      backgroundColor: 'white',
      height: 50
    },

    errorText: {
      alignSelf: 'flex-end',
      color: 'red',
      fontSize: 15,
      marginBottom: 10,
    },

    errorInput: {
      borderWidth: 2,
      borderColor: 'red'
    },
  
    nextBtn: {
      marginHorizontal: 20,
      marginBottom: 60,
      borderRadius: 50,
      justifyContent: 'center',
      backgroundColor: '#df3f3f',
      margin: 5,
      height: 50,
      alignItems: 'center'
    },
  })
 
export default RegisterCredentials;
 