import React from 'react';
import {StyleSheet, Text, View, ScrollView, TouchableOpacity} from 'react-native';

import {Card, Button} from 'react-native-elements';
import TextInput from 'react-native-material-textinput';
import DatePicker from 'react-native-datepicker';
import { postUserAccount } from '../services/accountservices';

export default class Register extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            accounts: [{
                account_id: '',
                name: '',
                nik: '',
                birthdate: '',
                address: '',
                username: '',
                password: '',
                phonenumber: '',
                balance: '',
                status: ''

            }]
        }
    }

    updateValue(text, field){
       if(field=='name'){
           this.setState({
               name:text,
           })
       }else if (field=='nik'){
           this.setState({
               nik:text
           })
       }else if (field=='birthdate'){
           this.setState({
               birthdate: text
           })
       }else if(field=='address'){
           this.setState({
               address: text
           })
       }else if(field=='username'){
           this.setState({
               username:text
           })
       }else if(field=='password'){
           this.setState({
               password:text
           })
       }else if (field=='phonenumber'){
           this.setState({
               phonenumber:text
           })
       }
    }

    submit()
    {
        let accounts={}
            accounts.name=this.state.name,
            accounts.nik=this.state.nik,
            accounts.birthdate=this.state.birthdate,
            accounts.address=this.state.address,
            accounts.username=this.state.username,
            accounts.password=this.state.password,
            accounts.phonenumber=this.state.phonenumber

        var url = 'http://192.168.1.23:3000/account';

        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('Success:', JSON.stringify(response)))
            .catch(error => console.error('Error:', error));
    }

    render() {
        return (
            <View style={styles.container}>
                {/*<View style={styles.circle}/>*/}
                <ScrollView>
                    <Card title={'Register Account'}>

                        {/*<ValidateTextInput*/}
                            {/*errorItem={this.state.errorText}*/}
                            {/*typeInput={"name"}*/}
                            {/*// styleIcon={{*/}
                            {/*//   color: 'red'*/}
                            {/*// }}*/}
                            {/*onChangeTextInput={(text) => {*/}

                                {/*this._onProcessTextChange(text);*/}
                                {/*this.updateValue(text, 'name');*/}
                            {/*}}*/}
                            {/*hiddenIcon={false}*/}
                            {/*typeErrorView={"bottomInput"}*/}
                            {/*hiddenIconErrorView={true}*/}
                        {/*/>*/}
                        <TextInput
                            label='Name'
                            labelActiveColor={'#fff'}
                            placeholder={'Enter Your Name'}
                            onChangeText={(text) => this.updateValue(text, 'name')}
                            required
                        />
                        <TextInput
                            label='NIK'
                            labelActiveColor={'#fff'}
                            placeholder={'Enter Your NIK'}
                            onChangeText={(text) => this.updateValue(text, 'nik')}
                        />
                        <Text>Date Of Birth</Text>
                        <DatePicker
                            // label={'Date Of Birth'}
                            style={{width: 350}}
                            birthdate={this.state.birthdate}
                            mode="date"
                            format="DD-MM-YYYY"
                            confirmBtnText="Confirm"
                            cancelBtnText="Cancel"
                            customStyles={{
                                // dateIcon: {
                                //     position: 'absolute',
                                //     right: 0,
                                //     top: 4,
                                //     marginLeft: 0
                                // },
                                dateInput: {
                                    marginRight: 18
                                }
                                // ... You can check the source to find the other keys.
                            }}

                            onDateChange={(text) => {
                               this.updateValue(text, 'birthdate')}}

                        />
                        <TextInput
                            label='Address'
                            labelActiveColor={'#fff'}
                            onChangeText={(text) => this.updateValue(text, 'address')}
                        />
                        <TextInput
                            label='Email'
                            labelActiveColor={'#fff'}
                            onChangeText={(text) => this.updateValue(text, 'username')}
                            keyboardType={"email-address"}
                        />
                        <TextInput
                            label='Password'
                            labelActiveColor={'#fff'}
                            onChangeText={(text) => this.updateValue(text, 'password')}
                            secureTextEntry={true}
                        />
                        <TextInput
                            label='Phone Number'
                            labelActiveColor={'#fff'}
                            onChangeText={(text) => this.updateValue(text, 'phonenumber')}
                        />
                    </Card>
                </ScrollView>
                <Button buttonStyle={styles.submitButton} title={'Submit'} onPress={() => this.submit()}/>
             </View>
        );
    }

    createAccount() {
        const data = this.state.accounts;
        console.log(data);
        postUserAccount(data);
    }



    // handleSubmit = event => {
    //     event.preventDefault();
    //     const accounts = {
    //         accounts: {
    //             this.state.accounts
    //         }
    //     };
    // }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EAFFDA',
        padding: 2,
    },
    circle: {
        margin: 10,
        backgroundColor: '#14b9ff',
        borderRadius: 100,
        borderColor: '#D0DB97',
        width: 200,
        height: 200,
        alignSelf: 'center'
    },
    input: {
        margin: 2,
        height: 40,
        borderColor: '#14b9ff',
    },
    submitButton: {
        backgroundColor: '#4D4861',
        padding: 10,
        margin: 2,
        height: 50,
        // width: 120,
        alignItems: 'flex-end',
        borderRadius: 25,
    },
    submitButtonText: {
        color: 'white',
        textAlign: 'center'
    },
});