import React, { Component } from 'react';
import { View, Text, StyleSheet, StatusBar, Image, AsyncStorage, ActivityIndicator } from 'react-native';
import { Form, Item, Input, Label, Button } from 'native-base';
import Axios from 'axios';
import CONFIG from '../config/config';

export default class LoginScreen extends Component {
    constructor(props) {
        super(props)
        this.state = { _email: '', _pass: '' }
    }

    static navigationOptions = {
        drawerLabel: () => null,
        drawerLockMode: 'locked-open'
    }

    Logar = async () => {
        this.setState({ isLoading: true })

        Axios.post(CONFIG + "login", { email: 'admin@turbbo.com.br', password: '123456789' }).then(response => {
            console.log("TOKEN >> " + JSON.stringify(response.data.access_token));
            AsyncStorage.setItem('Logado', response.data.access_token)
            this.props.navigation.navigate('Home');
        }).catch(function (error) {
            console.log(error);
        });
    }

    render() {
        return (
            <View style={styles.container}>
                {
                    this.state.isLoading &&
                    <View style={{ flex: 2, alignContent: "center", justifyContent: "center", position: "absolute", top: "30%" }}>
                        <ActivityIndicator size="large" color="#0000ff" />
                    </View>
                }
                <StatusBar hidden />
                <View style={styles.headerText}>
                    <Image source={require('../../assets/logo.png')} style={{ width: 199, height: 70, marginTop: 10 }} />
                </View>
                <View style={styles.formLogin}>
                    <Form>
                        <Item stackedLabel>
                            <Label>Email</Label>
                            <Input onChangeText={(email) => this.setState({ _email: email })} />
                        </Item>
                        <Item stackedLabel>
                            <Label>Pass</Label>
                            <Input onChangeText={(pass) => this.setState({ _pass: pass })} secureTextEntry={true} />
                        </Item>
                        <Button block style={styles.buttonLogin} onPress={() => this.Logar()} disabled={this.state.isLoading} isLoading={this.state.isLoading} activeOpacity={0.8} ><Text>ACESSAR</Text></Button>
                        <Button block light style={{ marginTop: 5, alignContent: 'center', textAlign: 'center' }} onPress={() => this.props.navigation.navigate('Cadastro')}><Text>Criar Conta</Text></Button>
                    </Form>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: { flex: 1 },
    headerText: { flex: 2, alignItems: 'center', justifyContent: 'center' },
    formLogin: { flex: 3 },
    buttonLogin: { marginTop: 50 }
});