//home.js
//Olivia Alberts
//Last updated: May 12th, 2020
//This file is the homescreen of the app.

import React, { useState } from 'react';
import {StyleSheet, View, Text, KeyboardAvoidingView, Image, TextInput, TouchableOpacity, Alert} from 'react-native'

const NUM_STOPS = 5;
var username = "";
var password = "";
 
  export default function Home({ navigation }) {

  /***************************************************************************
   Function: submitHandler()
   Description: This function handles the submit button. Upon press, it will
    get called and will navigate on to the next screen if a username and 
    password as been input. If they are left empty, the app will alert the
    user to put in a valid username and password.
  ***************************************************************************/
    const submitHandler = () => {
      console.log(username);
      console.log(password);
        if(username != "" && password != "") {
            navigation.navigate('Tracking');
        }
        else
            Alert.alert("Please enter a valid username and password.");
    }

    return (
    <KeyboardAvoidingView 
      style={styles.container}
      behavior="padding">
        <View style={styles.logoContainer}>
          <Image 
          style={{width: 350, height: 350, alignSelf: 'center'}}
          source={require('../assets/Logo.png')}
          />
        </View>
        <Text style = {styles.title}>
          Log in below and hit submit to begin!
        </Text>
        <TextInput style = {styles.input}
               placeholder = "Username"
               placeholderTextColor = "#93ece9"
               autoCapitalize = "none"
               onChangeText={text => {
                username = text.toString();
              }} />
        <TextInput style = {styles.input}
               placeholder = "Password"
               placeholderTextColor = "#93ece9"
               autoCapitalize = "none"
               onChangeText={text => {
                 password = text.toString();
               }} />
        <TouchableOpacity
          style = {styles.submitButton}
          onPress = {submitHandler}
               >
          <Text style = {styles.submitButtonText}> SUBMIT </Text>
        </TouchableOpacity>
        <View style={{ height: 60}}/>
      </KeyboardAvoidingView>
      
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    paddingTop:50,
    backgroundColor: '#343e7a',
    justifyContent: 'center'
  },
  title: {
    fontSize: 23,
    marginLeft: 10,
    marginRight: 10,
    color: '#fbe99e',
    fontStyle: 'italic',
    textAlign: 'center',
  },
  submitButton: {
    backgroundColor: '#fbe99e',
    padding: 10,
    width:130,
    alignSelf: 'center',
    margin: 15,
    height: 50,
 },
 submitButtonText:{
    color: '#343e7a',
    fontSize: 20,
    fontWeight: '700',
    textAlign: 'center',
 },
 input: {
  margin: 15,
  height: 50,
  fontSize: 15,
  color: '#fbe99e',
  borderColor: '#fbe99e',
  borderWidth: 1,
  alignContent: 'center'
}
});