import { Formik } from 'formik';
import React, { useState } from 'react';
import { Dimensions, StyleSheet, TextInput, View } from 'react-native';
import 'react-native-get-random-values';
import { RadioButton, Text } from 'react-native-paper';
import 'react-native-vector-icons';
import * as Yup from 'yup';
import { PrimaryButton, SecondaryButton } from '../../Buttons';
import { RegisterStepProps } from '../RegisterMain';

export interface RegisterMeasurementValues {
  sagitta: boolean,
  height: string,
  weight: string,
}

/** A yup form validation object for the measurement values */
const credsSchema = Yup.object({
  height: Yup.number().required("You must enter a height."),
  weight: Yup.number().required("You must enter a weight."),
})

/**
 * This component displays a form for the new user's sagitta usage, height, and weight 
 */
const RegisterMeasurements: React.FC<RegisterStepProps> = ({changeStep, setFormValues, formValues}) => {
  /**
 * The initial measurement values are set to the current height and weight values of the parent form data object
 */
  const initialValues: RegisterMeasurementValues = {sagitta: false, height: formValues.height, weight: formValues.weight};''
  /**
   * A flag that maps to whether or not the user is using a sagitta
   */
  const [sagitta, setSagitta] = useState<boolean>(false)

  /**
   * Reverses back to the password step
   */
  const back = () => {
    changeStep(2, "Next, we'll have you set a password.")
  }

  /**
   * Advances to the image step
   */
  const next = async (newFormValues: RegisterMeasurementValues) => {
    setFormValues({...formValues, height: newFormValues.height, weight: newFormValues.weight})
    changeStep(4, "Lastly, pick a photo you'd like everyone to get to know you by.")
  }

  return (  
      <View>
        <View style={styles.sagittaCheck}>
          <RadioButton uncheckedColor="white" color="white" value="yes" status={ sagitta ? 'checked' : 'unchecked' } onPress={() => setSagitta(true)} />
          <Text style={styles.radioLabel}>Yes</Text>
          <RadioButton uncheckedColor="white" color="white" value="no" status={ !sagitta ? 'checked' : 'unchecked' } onPress={() => setSagitta(false)} />
          <Text style={styles.radioLabel}>No</Text>
        </View>
      { sagitta ?
      <Formik
        initialValues={initialValues}
        validationSchema={credsSchema}
        enableReinitialize={true}
        onSubmit={values => next(values)}>
        {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
          <View style={{margin: 20}}>
              <TextInput 
                style={styles.textInput}
                placeholder="Height" 
                keyboardType="numeric"
                value={values.height}
                onChangeText={handleChange('height')}
                onBlur={handleBlur('height')} />
              {errors.height? <Text style={styles.errorText}>{errors.height}</Text> : null}
              <TextInput 
                style={styles.textInput}
                placeholder="Weight" 
                value={values.weight}
                onChangeText={handleChange('weight')} 
                onBlur={handleBlur('weight')} />
              {errors.weight? <Text style={styles.errorText}>{errors.weight}</Text> : null}
              <PrimaryButton style={{marginTop: 30}} onPress={handleSubmit as any} text="Next"/>
              <SecondaryButton onPress={back} text="Back"/>
          </View>
        )}
        </Formik> : 
        <>
        <PrimaryButton style={{marginTop: 30}} onPress={() => next({sagitta: false, height: '', weight: ''})} text="Next"/>
        <SecondaryButton onPress={back} text="Back"/>
        </> }
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
    
    position: 'absolute',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    flex: 1,
    flexDirection: 'column',
    resizeMode: 'cover',
  },

  brandContainer: {
    marginTop: 70,  
    height: 120,
    marginLeft: 25,
    flexDirection: 'column',
    justifyContent: 'space-evenly'
  },

  title: {
    
    color: 'white',
    fontSize: 20
  },

  sagittaCheck: {
    flexDirection: 'row',
    margin: 20
  },

  radioLabel: {
    marginTop: 7, marginRight: 20, color: 'white'
  },

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

  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
  },

  errorInput: {
    borderWidth: 2,
    borderColor: 'red'
  },

  nextBtn: {
    marginHorizontal: 20,

    borderRadius: 50,
    justifyContent: 'center',
    backgroundColor: '#df3f3f',
    margin: 5,
    height: 50,
    alignItems: 'center'
  },

  backBtn: {
    marginHorizontal: 20,
    marginBottom: 10,
    borderRadius: 50,
    borderColor: 'white',
    borderWidth: 2,
    justifyContent: 'center',
    backgroundColor: 'transparent',
    margin: 5,
    height: 50,
    alignItems: 'center'
  },
})

export default RegisterMeasurements;