import React from 'react';
import {StyleSheet, Text, View, TextInput, ImageBackground, Image, AsyncStorage, Alert, Keyboard, TouchableOpacity} from 'react-native';

import {Card, Button, FormInput, Icon} from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import Welcome from "../Welcome";


export default class Login extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            accounts: [{
                accountId: '',
                username: '',
                password: '',
                status: '',
                accountNumber: ''

            }]
        }
    }

    updateValue(text, field) {
        if (field == 'username') {
            this.setState({
                username: text,
            })
        } else if (field == 'password') {
            this.setState({
                password: text
            })
        }else if (field == 'accountId') {
            this.setState({
                accountId: text
            })
        }
    }

    submit()
    {
        let accounts={}
            accounts.accountId=this.state.accountId,
            accounts.username=this.state.username,
            accounts.password=this.state.password


        var url = 'http://192.168.1.22:8080/login';

        fetch(url, {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(accounts), // data can be `string` or {object}!
            headers:{
                'Content-Type': 'application/json'
            }
        }).then(res => res.json())
            .then((response) =>{
                console.log('Status:', JSON.stringify(response.status));
                if (response.status == '200') {
                    console.log(response.values);
                    AsyncStorage.setItem('accountId', response.values.accountId+'');
                    AsyncStorage.setItem('status', response.status);
                    AsyncStorage.setItem('username', response.values.username);
                    AsyncStorage.setItem('balance', response.values.balance+'');
                    AsyncStorage.setItem('accountNumber', response.values.accountNumber+'');

                        this.props.navigation.navigate('Welcome');
                    }
                        else if(response.status == '303'){
                        this.setState({spinner: false});
                        setTimeout(()=> {
                            Alert.alert('Warning', 'Sorry, your account has not been confirmed !')
                        })
                    }
                    else{

                        this.setState({ spinner: false });
                        setTimeout(() => {
                            Alert.alert('Warning','Username / Password Salah!');
                        }, 10);
                    }
                })
            .catch(error => Alert.alert("Error", "Sorry, Network Error or server is busy, Please Try Again"));
        }


    render() {

        return (
            <View style={styles.container}>
                <Image style={styles.logo}
                source={require ('../image/logo.jpg')}/>
                <View title={"Login Account"}>
                    <Text style={styles.text}>Sign-In</Text>
                    <TextInput
                        style={styles.input}
                        label='Email'
                        labelActiveColor={'#fff'}
                        placeholder={'Enter Your Email'}
                        onChangeText={(text) => this.updateValue(text, 'username')}
                        keyboardType={"email-address"}
                    />
                    <TextInput
                        style={styles.input}
                        label='Password'
                        labelActiveColor={'#fff'}
                        placeholder={'Enter Your Password'}
                        onChangeText={(text) => this.updateValue(text, 'password')}
                        secureTextEntry={true}
                    />
                    <Button buttonStyle={styles.submitButton}
                            title={'Login'}
                            onPress={() => this.submit()}
                            />
                </View>
                <Text style={styles.text1}>Don't have an Account ? </Text>
                <TouchableOpacity
                onPress={()=> this.props.navigation.navigate('Register')}>
                    <Text style={styles.text2}>Sign-Up</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EAFFDA',
        padding: 2,
    },
    logo: {
        margin: 10,
        marginTop: 40,
        backgroundColor: '#f8fff9',
        borderRadius: 100,
        borderColor: '#0A917F',
        width: 200,
        height: 200,
        alignSelf: 'center',
        opacity: 50,
        borderWidth: 4
    },
    input: {
        height: 45,
        borderRadius: 45,
        margin: 10,
        paddingLeft: 35,
        paddingRight: 35,
        backgroundColor: '#fff',
        color: '#0A917F',
        opacity: 40,
        fontSize: 17,
    },
    submitButton: {
        backgroundColor: '#0A917F',
        padding: 10,
        marginTop: 15,
        height: 45,
        alignItems: 'flex-end',
        borderRadius: 25,
        justifyContent: 'center'
    },
    submitButtonText: {
        color: 'white',
        textAlign: 'center'
    },
    picker: {
        height: 45,
        borderRadius: 45,
        margin: 10,
        paddingLeft: 35,
        paddingRight: 35,
        backgroundColor: '#fff',
        color: '#0A917F',
        marginTop: 30
    },
    text: {
        fontSize: 30,
        color: '#0A917F',
        alignSelf: 'center',
        marginTop: 20,
        marginBottom: 25
    },
    text1: {
        fontSize: 20,
        color: '#0A917F',
        alignSelf: 'center',
        marginTop: 40,
    },
    text2: {
        fontSize: 25,
        color: '#0A917F',
        alignSelf: 'center',
    },
    searchSection: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    searchIcon: {
        padding: 10,
    },
});