import React, {useState, useEffect} from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { Formik } from 'formik';
import { Entypo } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios';
import * as yup from 'yup';

const reviewSchema = yup.object({
  name: yup.string().required().min(2),
  email: yup.string().required().min(2),
  password: yup.string().required().min(2),
  district: yup.string().required().min(2)

})

export function SignUp({ navigation }) {

  // const [submit, setSubmit] = useEffect();

    // function handleSubmit()
    // {
    //   useEffect(() => {
    //     axios.post('http://192.168.8.126:5000/users', {
    //               district: values.district,
    //               email: values.email,
    //               name: values.name,
    //               password: values.password,
    //             })
    //             .then(function (response){
    //               console.log(response + "logged")
    //               // return response;
    //             })
    //             .catch(function(error){
    //               console.log(error)
    //             })
    //   })
    // }

  return (

    <View style={styles.container}>
      <ImageBackground source={require('../assets/signup11.jpg')} style={styles.images}>
        <Formik
          initialValues={{ name: '', email: '', password: '', district: '' }}
          validationSchema={reviewSchema}
          
          onSubmit= { (values, actions) => {
            // console.log(actions.submitForm())
            // await actions.submitForm()
            console.log(values);
            // actions.submitForm();
            // const valuesToBeSent = JSON.stringify({
            //   "name": values.name,
            //   "email": values.email,
            //   "password": values.password,
            //   "district": values.district,
            // })
            // console.log("")
            const form = new FormData ();

            form.append("name", values.name) 
            form.append("email", values.email)
            form.append("password", values.password)
            form.append("district", values.district) 
              
            
            axios({
              method:"POST",
              url: "http://192.168.8.126:5000/users",
              data: form
            })
            .then(function (response){
              console.log("abc" + response)
              actions.resetForm();
              alert("User successfully created")
              // return response;
            })
            .catch(function(error){
              console.log(error)
            })
            
            // useEffect(() => {
              //   axios.post('http://192.168.8.126:5000/users', {
                //             district: values.district,
                //             email: values.email,
                //             name: values.name,
                      //             password: values.password,
                      //           })
                      //           .then(function (response){
                        //             console.log(response + "logged")
                        //             // return response;
                        //           })
                        //           .catch(function(error){
                          //             console.log(error)
                          //           })
                          // })
                          
                        }}
        >
          {(props) => (
            <View>
                <Text style={styles.heading}> Sign Up </Text>

                <View style={{alignSelf:'center', marginBottom:30}}>
                  <Ionicons name="person-add" size={50} color="black" />
                </View>


              <View style={styles.container}>
                <View style={styles.iconView}>
                <Ionicons name="person" size={24} color="white" />
                  <TextInput
                    style={styles.input}
                    placeholder='Name'
                    onChangeText={props.handleChange('name')}
                    value={props.values.name}
                  />
                </View>
                  <Text style={styles.errorText}>{props.errors.name}</Text>
              </View>

              <View style={styles.container}>
                <View style={styles.iconView}>
                <MaterialIcons name="email" size={24} color="white" />
                  <TextInput
                    style={styles.input}
                    placeholder='Email'
                    onChangeText={props.handleChange('email')}
                    value={props.values.email}
                  />

                </View>
                  <Text style={styles.errorText}>{props.errors.email}</Text>
              </View>


              <View style={styles.container}>
                <View style={styles.iconView}>
                <Entypo name="lock" size={30} color="white" />
                  <TextInput
                    style={styles.input}
                    multiline
                    placeholder='Password'
                    onChangeText={props.handleChange('password')}
                    value={props.values.password}
                  />

                </View>
                  <Text style={styles.errorText}>{props.errors.password}</Text>
              </View>


              <View style={styles.container}>
                <View style={styles.iconView}>
                <Entypo name="location" size={24} color="white" />
                  <TextInput
                    style={styles.input}
                    placeholder='District'
                    onChangeText={props.handleChange('district')}
                    value={props.values.district}
                  />

                </View>
                  <Text style={styles.errorText}>{props.errors.district}</Text>
              </View>

              <View>
                <TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
                  <Text style={styles.buttonText}>Sign Up</Text>
                </TouchableOpacity>
              </View>

            </View>
          )}
        </Formik>
      </ImageBackground>
    </View >
  );
}

const styles = StyleSheet.create({
  input: {
   
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    // paddingTop: 10,
    fontSize: 15,
    borderRadius: 25,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 19,
    backgroundColor: 'white',
    width: '75%',
    height:40
  },
  heading: {
    textAlign: 'center',
    color: 'black',
    fontWeight: 'bold',
    padding: 10,
    fontSize: 18,
  },
  container: {
    flex: 1,
    color: '#333',
    padding: 10,
    width: "100%",
    // justifyContent: 'flex-start',
    alignContent: 'stretch',
  },
  buttonSub: {
    width: "85%",
    padding: 10,
    marginTop: 60,
    marginLeft: 30,
    marginHorizontal: 10,
    backgroundColor: "yellow",
    flexDirection: "row",
    marginBottom: 10,
    justifyContent: "center",
    borderRadius: 10,
    marginRight: 10,
  },
  iconView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'yellow'
  },
  images: {
    height: '100%',
    justifyContent: 'center'
  },
  container: {
  
  },
  errorText:{
    color:"black",
    alignSelf:"center"
  }
});