import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    AppRegistry,
    StyleSheet,
    TextInput,
    View,
    Alert,
    Button,
    Text,
    AsyncStorage,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    KeyboardAvoidingView
} from 'react-native';
import axios from 'axios';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Setting from '../../Setting';

class LoginScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            isLoading: false
        }


        this.root = this.props.component.root;

        //save token
        //this.root.saveToken('asdasd');

        //ambil token
        //this.root.state.token
    }

    UserLoginFunction = (username,password) => {

        // const { username } = this.state;
        // const { password } = this.state;

        this.setState({
            isLoading: true
        });
        axios({
            method: 'get',
            url: Setting.baseUrl + '/auth/login',

            params: {
                email: username,
                password: password,
            }
        }).then((response) => {
           
            const token = response.data.data.token;

            if (token != '') {
                let str = token;
                this.root.saveToken(str)
                
            }
            else {
                Alert.alert(response);
            }
            this.setState({
                isLoading: false
            });
        }).catch((error) => {
            alert("Username / Password salah !");
            this.setState({
                isLoading: false
            });
        });
    }

    render() {
        return (
            <View style={{flexDirection:'column',flex:1,maxHeight:600}}>
            <View style={{
                alignItems:'center',alignContent:'center',flexDirection:'column',flex:1
            }}>
            {/* gambar backgroundColor */}
            <Image 
            source={require('../../img/background.jpg')}
            style={{
                position: 'absolute',
                width: '100%',
                height: '100%',
                resizeMode:'cover'
            }}/>
            {/* gambar logo */}
                <Image 
                    style ={{
                        width:120,height:120,marginTop:80
                    }}
                    source = {require('./../../img/icon.png')}
                />
                    {/* username */}
                    <View style={{marginTop:150}}/>
                <View style={{
                    flexDirection:'row',marginLeft:20,marginRight:20, borderColor:'#F2526E',borderWidth:1,borderRadius:5,
                    paddingLeft:20,alignContent:'center',alignItems:'center',width:270,backgroundColor:'#fff'
                }}>
                <Ionicons name='ios-person-outline'
                color={'#F2526E'}
                size={30}
                MarginLeft={10}/>

            <TextInput
        placeholder="Username"
                    onChangeText={username => this.setState({ username })}
                    underlineColorAndroid='transparent'
                    style={styles.Textform}
                />

                </View>
                {/* end of username */}
                {/* password */}
                <View style={{
                    marginTop:10,
                    flexDirection:'row',marginLeft:20,marginRight:20, borderColor:'#F2526E',borderWidth:1,borderRadius:5,
                    paddingLeft:20,alignContent:'center',alignItems:'center',width:270,backgroundColor:'#fff'
                }}>
                <Ionicons name='ios-lock-outline'
                color={'#F2526E'}
                size={30}
                MarginLeft={10}/>

            <TextInput
        placeholder="password"
                    onChangeText={username => this.setState({ username })}
                    underlineColorAndroid='transparent'
                    style={styles.Textform}
                    secureTextEntry={true}
                />
                </View>
                
                {/* end of passsword */}
                <View style={{marginTop:20}}></View>
                {this.state.isLoading == true && (
                    <View style={styles.container}>
                        <ActivityIndicator size="large" />
                    </View>
                )}
                {this.state.isLoading == false && (
                    <TouchableOpacity onPress={()=>{this.UserLoginFunction(this.state.username,this.state.password)}}>
                        <View style={styles.button}>
                            <Text style={styles.TextInputStyleClass}>
                                Login
                                </Text>
                        </View>
                    </TouchableOpacity>
                )}
                {this.state.isLoading == false && (
                    <TouchableOpacity onPress={() => {
                        this.props.component.root.navigate('Register', {
                        });
                      }}>

                        <View style={styles.buttonRegister}>
                        <Text style={styles.TextInputStyleClass}>
                                Register
                                </Text>
                        </View>
                    </TouchableOpacity>
                )}
                {/* end of parent */}
                
                <Text
                style={{
                fontSize:10,
                width:270,
                textAlign:'center',
                color: '#F2526E'
                }}>
                    dengan masuk berarti anda sudah menyetujui syarat dan ketentuan kami
                </Text>
                </View>               
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: "center"
    },
    TextInputStyleClass:{
        flex:1,
        fontSize:20,
        color:'#FFF',
        textAlign:'center',
        justifyContent:'center',
        marginTop:10,
        // alignItems:'center',
    },
    Textform:{
        flex:1,
        fontSize:17,
        color:'#F2526E',
        marginLeft:20
    },
    button:{
        backgroundColor:'#F2526E',
        borderColor:'#F2526E',
        borderRadius:5,
        width:270,
        height:50,  
        marginBottom:15,
    },
    buttonRegister:{
        backgroundColor:'#2ECC71',
        borderColor:'#2ECC71',
        borderRadius:5,
        width:270,
        height:50,  
        marginBottom:15
    },
});

function mapStateToProps(state) {
    return {
        component: state.component,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setRoot: (root) => dispatch({
            type: 'set_root',
            root: root
        })
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(LoginScreen);