import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, AsyncStorage } from 'react-native';
import { withNavigation } from 'react-navigation';
import { NetInfo } from 'react-native'


const serverUrl = "http://192.168.43.108:8080/users";



class LoginComponent extends React.Component{


    constructor(props) {
      super(props);
      this.state = {username: '',
                    password: '',
                    isConnected: true,
                    users: []
                  };
      AsyncStorage.setItem('users', JSON.stringify(this.state.users));
    }


   handleConnectivityChange = (isConnected) => {
    this.setState({ isConnected });
  }

    componentDidMount(){
      NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }

    getUser(username, password){
      var handleLogin = this.props.handleLogin;
      const path = `${serverUrl}?username=${username}`;
      const axios = require('axios');

      if (this.state.isConnected === true){
        axios.get(path)
        .then((user) => {
                          if (user.data.password === password){
                            handleLogin({loggedIn: 'true'});
                            this.setState({users: [...this.state.users, user.data]});
                            AsyncStorage.setItem('users', JSON.stringify(this.state.users));
                            this.props.navigation.navigate('mainscreen');
                          }
                          else{
                             alert("Wrong username or password!");
                          }
                        })
          .catch(function(error) {
              alert("Network problem!")
          });

      }
      else{
        AsyncStorage.getItem('users')
        .then((response) => {
          let responses = JSON.parse(response);
           let user = responses.filter(function(response){
             return response.email === username && response.password === password;
           });

           if (user.length > 0){
            this.props.navigation.navigate('mainscreen');
           }
           else {
             alert("There is no such user in our local database!");
           }
        })
        .catch(error => {
          alert(error);
        })

      }
    }

    render(){
        return (
            <View style={styles.container}>

            <Text style={styles.text}>LogIn</Text>
            <TextInput style={styles.input}
                       value={this.state.username}
                       onChangeText = {(text) => this.setState({username: text})}
                       placeholder="Enter username" />

            <TextInput style={styles.input}
                       secureTextEntry={true}
                       value={this.state.password}
                       onChangeText = {(text) => this.setState({password: text})}
                       placeholder="Enter password"/>

            <TouchableOpacity style={styles.button}
                   onPress={() => this.getUser(this.state.username, this.state.password)}
            >
              <Text style={styles.text}>Press me</Text>
            </TouchableOpacity>
        </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: '#fff',
      alignItems: 'stretch',
      justifyContent: 'center',
    },
    input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1,
      paddingLeft: 20
   },
   button: {
     padding: 10,
     margin: 15,
     borderRadius: 10,
     backgroundColor: "#7CFC00",
     alignContent: "center"
   },
   text: {
    textAlign: "center",

   }
  });


export default  withNavigation(LoginComponent)