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

export interface PasswordValues {
  password: string;
  confirmPassword: string;
}

const RegisterPassword: React.FC<RegisterStepProps> = ({changeStep, setFormValues, formValues}) => {
  /**
 * The initial measurement values are set to the current password values of the parent form data object
 */
  const initialValues: PasswordValues = {password: formValues.password, confirmPassword: formValues.confirmPassword};

  const next = (newFormValues: PasswordValues) => {
    setFormValues({...formValues, password: newFormValues.password, confirmPassword: newFormValues.confirmPassword});
    changeStep(3, "Will you be using a Sagitta?");
  }
  
  const back = () => {
    changeStep(1, "Let's start with some basic account information");
  }

  return (
        <Formik
          initialValues={initialValues}
          validationSchema={passwordSchema}
          enableReinitialize={true}
          onSubmit={values => next(values)}>
          {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
              <View style={{margin: 20}}>
                  <TextInput 
                    style={PasswordFormStyles.textInput}
                    placeholder="Password" 
                    secureTextEntry={true} 
                    value={values.password}
                    onChangeText={handleChange('password')}
                    onBlur={handleBlur('password')} />
                  {errors.password && touched.password ? <Text style={PasswordFormStyles.errorText}>{errors.password}</Text> : null}
                  <TextInput 
                    style={PasswordFormStyles.textInput}
                    placeholder="Confirm password"
                    secureTextEntry={true} 
                    value={values.confirmPassword}
                    onChangeText={handleChange('confirmPassword')} 
                    onBlur={handleBlur('confirmPassword')} />
                  {errors.confirmPassword && touched.confirmPassword ? <Text style={PasswordFormStyles.errorText}>{errors.confirmPassword}</Text> : null}
                  <PrimaryButton style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>
                  <SecondaryButton onPress={back} text="Back"/>
              </View>
            )}
      </Formik>
  )
}

export const PasswordFormStyles = StyleSheet.create({backBtn: {
    marginHorizontal: 20,
    marginBottom: 10,
    borderRadius: 50,
    borderColor: 'white',
    borderWidth: 2,
    justifyContent: 'center',
    backgroundColor: 'transparent',
    margin: 5,
    height: 50,
    alignItems: 'center'
  },
    textInput: {
      marginVertical: 7,
      paddingLeft: 30,
      borderRadius: 50,
      overflow: 'hidden',
      backgroundColor: 'white',
      height: 50
    },

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

    errorInput: {
      borderWidth: 2,
      borderColor: 'red'
    },
  })
 
export default RegisterPassword;
 