import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput, Alert, Keyboard } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';

export default class SignUpScreen extends React.Component {

  //Functions
  constructor(props){
    super(props)

    this.state = {
      confirm: '',
      password: '',
      username: '',
      email: '',
    }
  }


UserRegistrationFunction = () =>{
  Keyboard.dismiss()
  if (this.state.username == '' || this.state.email == '' || this.state.password == '' || this.state.confirm == '')
  {
    alert("Please fill in all fields.")
    return;
  }
  if (this.state.confirm != this.state.password)
  {
    alert("Passwords do not match. Please try again.");
    return;
  }

  fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/user_registration.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      name: this.state.username,
  
      password: this.state.password
  
    })
  
  }).then((response) => response.json())
        .then((responseJson) => {
  // Showing response message coming from server after inserting records.
          if (responseJson == "Success!")
          {
            Alert.alert("Welcome, " + this.state.username + "!");
            this.props.navigation.navigate('Main');
          }
          else{
            Alert.alert(responseJson);
            return;
          }
  
        }).catch((error) => {
          console.error(error);
        });
 
}

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center' }}>
        <Text style={{ fontSize: 30, paddingBottom: 30, paddingTop: 40 }} >Sign Up</Text>

        <TextInput
          style={{height: 50, width: 300,}}
          placeholder="Username"
          onChangeText={(text) => this.setState({username:text})}
        />
        <TextInput
          style={{height: 50, width: 300}}
          placeholder="Email"
          onChangeText={(text) => this.setState({email:text})}
          keyboardType='email-address'
        />
        <TextInput
          style={{height: 50, width: 300}}
          placeholder="Password"
          secureTextEntry={true}
          onChangeText={(text) => this.setState({password:text})}
        />
        <TextInput
          style={{height: 50, width: 300}}
          placeholder="Confirm Password"
          returnKeyLabel = {"next"}
          secureTextEntry={true}
          onChangeText={(text) => this.setState({confirm:text})}
        />
        <Button
          style = {{ paddingTop: 40 }}
          title="Sign Up"
          onPress={this.UserRegistrationFunction.bind(this)} //Change this to the main screen
        />
        <Button
          title="Already have an account? Sign in."
          onPress={() => this.props.navigation.navigate('SignIn')}
        />
      </View>
    );
  }  
}