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


export default class SignInScreen extends React.Component {

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

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

  _ValidateSignIn(){ //Validate: The username & password are correct.
    this.props.navigation.navigate('Main', {user: 'lilkhor'});
    /*Keyboard.dismiss()
      if (this.state.username == '' || this.state.password == '')
      {
        alert("Please fill in all fields.");
        return;
      }
      else
      {
          fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/authenticate_user.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: 20, paddingTop: 40 }} >Sign In</Text>
        <TextInput
          style={{height: 50, width: 300,}}
          placeholder="Username or Email Address"
          onChangeText={(text) => this.setState({username:text})}
        />
        <TextInput
          style={{height: 50, width: 300}}
          placeholder="Password"
          onChangeText={(text) => this.setState({password:text})}
          secureTextEntry={true}
        />
        <Button
          title="Sign In"
          onPress={this._ValidateSignIn.bind(this)}
        />
        <Button
          title="Forgot password?"
        />
        <Button
          title="Create Account"
          onPress={() => this.props.navigation.navigate('SignUp')}
         />
        <KeyboardSpacer />
      </View>
    );
  }  
}