import React, { Component } from 'react';

import {
    View,
    StyleSheet,
    Text,
    TouchableHighlight,
    Image,
    TextInput,
    ActivityIndicator,
    ToastAndroid
} from 'react-native';

import authService from'./AuthService/AuthService';


export default class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            username:undefined,
            password:undefined,
            animation:false,
            badCredentials:false,
            success:false
        };
}

    render() {
         var errorCtrl=<View/>
         if(!this.state.success && this.state.badCredentials){
                errorCtrl=<Text style={styles.error}>that username and password combination did not work</Text>
         }
        return (
            <View style={styles.container}>
                <Image source={require('./img/Octocat.png')} style={styles.logo} />
                <Text style={styles.heading}>Github browser</Text>
                <TextInput style={styles.input}
                    placeholder={"Github username"}
                    onChangeText={(text) => this.setState({username:text})}

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

                    />
                <TouchableHighlight
                    style={styles.button}
                    onPress={this.onLoginPressed.bind(this)}
                >
                <Text style={styles.buttonText}>Log in</Text>
                </TouchableHighlight>
                    {errorCtrl}
                <ActivityIndicator
                    animating={this.state.animation}
                    size="large"
                />
            </View>
        )
    }

    onLoginPressed(){
        this.setState({animation:true});
        console.log('onLoginPressed', this);
        authService.login({
            username : this.state.username,
            password: this.state.password
        },(results)=>{
            console.log('results', this);
            this.setState(results);
            if(this.state.success && this.props.onLogin){
                this.props.onLogin();
            }
        });
     }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        paddingTop: 40,
        alignItems: 'center',
        padding: 10,

    },
    logo: {
        width: 88,
        height: 77
    },
    heading: {
        fontSize: 30,
        marginTop: 10
    },
    input: {
        height: 50,
        marginTop: 10,
        padding: 4,
        fontSize: 18,
        borderWidth: 1,
        alignSelf: 'stretch',
        borderColor: '#48bbec'
    },

    button:{
        height:50,
        backgroundColor:"#48BBEC",
        alignSelf:'stretch',
        marginTop:10,
        justifyContent:'center',

    },
    buttonText:{
        fontSize:22,
        color:"#fff",
        alignSelf:'center'
    },
   error:{
       color:'red',
       paddingTop: 10
   }

})