import { Formik } from "formik"
import React, { ReactElement } from "react"
import { StyleSheet, TextInput, View, Text, TextStyle, GestureResponderEvent } from "react-native"
import * as Yup from 'yup';
import { PrimaryButton, SecondaryButton } from "./Buttons";

export interface PasswordFormValues {
    password: string;
    confirmPassword: string;
  }
  
interface PasswordFormProps {
    initialValues?: PasswordFormValues, 
    onFormSubmit: (formValues: PasswordFormValues) => void, 
    cancel: () => void, 
    SubmitButton?: React.FC<{onPress: (event: GestureResponderEvent) => void}>
    CancelButton?: React.FC<{onPress: (event: GestureResponderEvent) => void}>
    fieldStyle?: TextStyle
}

const credsSchema = Yup.object({
    password: Yup.string().trim().required("You must enter a password.").matches(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w~@#$%^&*+=`|{}:;!.?\"()\[\]-]{8,}$/, "Your password must be a minimum of 8 characters and contain 1 special character and 1 number."),
    confirmPassword: Yup.string().trim().required("You must confirm your password.").oneOf([Yup.ref('password'), null], "Your passwords must match.")
})

export const PasswordForm: React.FC<PasswordFormProps> = ({initialValues, onFormSubmit, cancel, SubmitButton, CancelButton, children, fieldStyle}) => {
    const renderChildButtons = (handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void) => {
        return React.Children.map(children, (child, index) => {
            return React.cloneElement(child as ReactElement<any, string| React.JSXElementConstructor<any>>, {
                handleSubmit: handleSubmit,
                cancel: cancel
            })
    })}

    return (
        <Formik
        initialValues={initialValues ? initialValues : {password: '', confirmPassword: ''}}
        validationSchema={credsSchema}
        enableReinitialize={true}
        onSubmit={values => onFormSubmit(values)}>
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
            <View style={{margin: 20}}>
                <TextInput 
                  style={fieldStyle ? fieldStyle : styles.textInput}
                  placeholder="Password" 
                  secureTextEntry={true} 
                  value={values.password}
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')} />
                {errors.password && touched.password ? <Text style={styles.errorText}>{errors.password}</Text> : null}
                <TextInput 
                  style={fieldStyle ? fieldStyle : styles.textInput}
                  placeholder="Confirm password"
                  secureTextEntry={true} 
                  value={values.confirmPassword}
                  onChangeText={handleChange('confirmPassword')} 
                  onBlur={handleBlur('confirmPassword')} />
                {errors.confirmPassword && touched.confirmPassword ? <Text style={styles.errorText}>{errors.confirmPassword}</Text> : null}
                {children}
                
                {/* {SubmitButton ? <SubmitButton onPress={handleSubmit as any} /> : <PrimaryButton style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>}
                {CancelButton ? <CancelButton onPress={() => console.log('test')}/> : <SecondaryButton onPress={() => console.log('test')} text="Back"/>} */}
            </View>
          )}
    </Formik>
    )
}

const styles = StyleSheet.create({
    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'
      },
})