import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, TextInput} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { Button } from 'native-base';
import { withNavigation } from 'react-navigation';
import Axios from 'axios';


class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        }
    }

    // componentDidMount() {
    //     Axios({
    //         method: 'get',
    //         url: 'http://192.168.56.1/vzuu/public/api/user',
    //         dataType: 'json',
    //         headers: {
    //             'Accept': 'application/json',
    //             'Content-Type': 'application/json'
    //         },
    //     })
    //     .then(function(response) {
    //         console.log(response);
    //     })
    //     .catch(function(error) {
    //         console.log(error);
    //     })
    // }

   handleSubmit = () => {
        console.log(this.state);
        Axios({
            method: 'post',
            url: 'http://192.168.56.1/vzuu/public/api/login',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            data: {
                email: this.state.email,
                password: this.state.password,
            },
        })
        .then((response) => {
            console.log(response.data);
            AsyncStorage.setItem('token', response.data.token);
            this.props.navigation.navigate('Home');
        })
        .catch(function(error) {
            console.log(error);
        });
        this.setState({email: '', password:'',});
    }

    render() {
        return(
            <View style={styles.container}>
                <View style={styles.mar}>
                    <Text style={styles.txtlog}>Silahkan Login</Text>
                </View>
                    <TextInput style={styles.text} onChangeText={email => this.setState({ email})} value={this.state.email} placeholder="Email" underlineColorAndroid="#E91E63" />
                    <TextInput style={styles.text} secureTextEntry={true} onChangeText={password => this.setState({ password })} value={this.state.password} placeholder="Password" underlineColorAndroid="#E91E63"/>
                    <Button rounded primary style={styles.buttonText}  onPress={this.handleSubmit}>
                        <Text style={styles.txt}>Login</Text>
                    </Button>
            </View>

        )
    }
}

export default withNavigation(Login);
const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center'},
    text: {fontSize: 16, width: 280 },
    buttonText: { fontSize: 16, color: '#ffffff', marginTop: 15},
    txt: { color: '#fff', fontSize: 16, width: 280, textAlign: 'center'},
    imgBackground : { width: '100%', height: '100%' },
    txtlog: {  fontSize: 18, textAlign: 'center', marginTop: 100 },
    mar: { marginTop: 30   }

 });