import React, { Component } from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity } from 'react-native';
import { Container, View, Item, Input } from 'native-base';
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/lrn/public/api/user',
            dateType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
    }

    handleSubmit = () => {
        axios({
            method: 'post',
            url: 'http://192.168.56.1/lrn/public/api/login',
            dataType: 'json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            data: {
                email: this.state.email,
                password: this.state.password,
            },
        })
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
        this.setState({ email: '', password: '', });
    }

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

                    <TextInput placeholder="Email" onChangeText={email => this.setState({ email })} value={this.state.email} underlineColorAndroid='#1171EC' />
                </View>
                    <View style={styles.container}>
                </View>
                <TextInput placeholder="Password" secureTextEntry={true} onChangeText={password => this.setState({ password })} value={this.state.password} underlineColorAndroid='#1171EC' />
                    <View style={styles.container}>
                </View>
                <TouchableOpacity onPress={this.handleSubmit} style={styles.button} >
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>
            </Container>
        )
    }
}
export default Login;
const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputBox: {
        width: 300,
        backgroundColor: 'transparent',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize: 16,
        color: '#000',

    },
    button: {
        width: 280,
        backgroundColor: '#32CD32',
        borderRadius: 25,
        marginVertical: 10,
        paddingVertical: 12
    },
    buttonText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#fff',
        textAlign: 'center'
    },
    borderStyle: 25
})