import React, { Component } from 'react';
import {
    Container,
    Item,
    Label,
    Input,
    Header,
    Form,
    Content,
    Button,
    Text,
    Picker,
    Toast
} from 'native-base';

import {View, StyleSheet, Keyboard, TouchableWithoutFeedback, ActivityIndicator} from 'react-native';

import Dimensions from 'Dimensions';

import * as firebase from 'firebase';

import {Actions} from 'react-native-router-flux';


const {width, height} = Dimensions.get('window');

export default class Profile extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            email: '',
            password: '',
            name: '',
            age: '',
            gender: 'M',
            user: {},
            postData: {},
            userId: ''
        })
    }
    static user = {};
    componentDidMount() {
        const user = firebase.auth().currentUser;
        //console.log(`CDM user : ${user.uid}`);
        firebase.database().ref(`/users/${user.uid}`).once('value', (snapshot) => {
            //USER = snapshot.val()
            //this.user = (snapshot.val() && snapshot.val().name) || 'Anonymous';
            this.setState({
                user: snapshot.val(),
                userId: user.uid
            })
        });
        //this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
    }

   /*  componentWillUnmount() {
        this.keyboardDidShowListener.remove();
    }

    keyboardDidShow = () => {
        console.log('KEYBOARD IS OPEN');
    } */

    logOut = () => {
        firebase.auth().signOut()
            .then(() => {
               //console.log(`this.props: ${JSON.stringify(this.props)}`);
               Actions.reset('HomeScreen');
            })
            .catch((error) => {
                alert(error);
            })
    }

    setAge = (age) => {
        const val = age.replace(/[^0-9]/g, '');
        this.setState({
            user: {
                ...this.state.user,
                age: val
            },
            postData: {
                ...this.state.postData,
                age: val
            }
        })
    }

    setUsername = (name) => {
        this.setState({
            user: {
                ...this.state.user,
                name: name
            },
            postData: {
                ...this.state.postData,
                name: name
            }
        });
    }

    onValueChange = (value) => {
        this.setState({
            user: {
                ...this.state.user,
                gender: value
            },
            postData: {
                ...this.state.postData,
                gender: value
            }
        })
    }

    saveData = () => {
        Keyboard.dismiss();
        console.log(`fieldRef: ${JSON.stringify(fieldRef)}`);
        const fieldRef = firebase.database().ref(`users/${this.state.userId}`);
        fieldRef.update({...this.state.postData}).then(() => {
            alert('Data saved successfully');
        }).catch(() => {
            alert('Something went wrong');
        });
    }

    render() {
        console.log(`user data: ${JSON.stringify(this.state.user)}`);
        /* console.log(`USER: ${JSON.stringify(USER)}`);
        console.log(`user data: ${JSON.stringify(this.state.user)}`); */
        const {user} = this.state;
        return (
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <Container style={styles.container}>
                <Content
                    bounces={false}
                >
                    <Form style={{marginTop: 25}}>
                        <Item floatingLabel>
                            <Label>Name</Label>
                            <Input
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                onChangeText={(name) => this.setUsername(name)}
                                value={this.state.user.name}
                                onSubmitEditing={Keyboard.dismiss}
                                //keyboardType={'numeric'}
                            />
                        </Item>
                        <Item floatingLabel>
                            <Label>Age</Label>
                            <Input
                                keyboardType={'numeric'}
                                onChangeText={(age) => this.setAge(age)}
                                value={this.state.user.age}
                                maxLength={2}
                                onSubmitEditing={Keyboard.dismiss}
                            />
                        </Item>
                        <Item stackedLabel>
                            <Label>Gender</Label>
                            <Picker
                                iosHeader="Select one"
                                mode="dropdown"
                                selectedValue={this.state.user.gender}
                                onValueChange={(value) => this.onValueChange(value)}
                                placeholder='Tap to select gender'
                            >
                                <Picker.Item label="Male" value="M" />
                                <Picker.Item label="Female" value="F" />
                                <Picker.Item label="Prefer not to say" value="N" />
                            </Picker>
                        </Item>
                        <Button
                            style={{marginTop: 40}}
                            full
                            rounded
                            primary
                            onPress={() => this.saveData()}
                        >
                            <Text style={{color: 'white'}}>Save Changes</Text>
                        </Button>
                        <Button
                            style={{marginTop: 10}}
                            full
                            rounded
                            success
                            onPress={() => this.logOut()}
                        >
                            <Text>Log-Out</Text>
                        </Button>
                    </Form>
                </Content>

                </Container>
            </TouchableWithoutFeedback>
        );
        /* if (isLoading) {
            return <Loader isLoading={isLoading}/>
        } else {
            return (
                <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <Container style={styles.container}>
                    <Content
                        bounces={false}
                    >
                        <Form style={{marginTop: 25}}>
                            <Item floatingLabel>
                                <Label>Name</Label>
                                <Input
                                    autoCorrect={false}
                                    autoCapitalize={'none'}
                                    onChangeText={(name) => this.setUsername(name)}
                                    value={this.state.user.name}
                                    onSubmitEditing={Keyboard.dismiss}
                                    //keyboardType={'numeric'}
                                />
                            </Item>
                            <Item floatingLabel>
                                <Label>Age</Label>
                                <Input
                                    keyboardType={'numeric'}
                                    onChangeText={(age) => this.setAge(age)}
                                    value={this.state.user.age}
                                    maxLength={2}
                                    onSubmitEditing={Keyboard.dismiss}
                                />
                            </Item>
                            <Item stackedLabel>
                                <Label>Gender</Label>
                                <Picker
                                    iosHeader="Select one"
                                    mode="dropdown"
                                    selectedValue={this.state.user.gender}
                                    onValueChange={(value) => this.onValueChange(value)}
                                    placeholder='Tap to select gender'
                                >
                                    <Picker.Item label="Male" value="M" />
                                    <Picker.Item label="Female" value="F" />
                                    <Picker.Item label="Prefer not to say" value="N" />
                                </Picker>
                            </Item>
                            <Button
                                style={{marginTop: 40}}
                                full
                                rounded
                                primary
                                onPress={() => this.saveData()}
                            >
                                <Text style={{color: 'white'}}>Save Changes</Text>
                            </Button>
                            <Button
                                style={{marginTop: 10}}
                                full
                                rounded
                                success
                                onPress={() => this.logOut()}
                            >
                                <Text>Log-Out</Text>
                            </Button>
                        </Form>
                    </Content>

                    </Container>
                </TouchableWithoutFeedback>
            );
        } */
    }
}

/* const ProfileForm = ({user}) => {
    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <Container style={styles.container}>
                <Content
                    bounces={false}
                >
                    <Form style={{marginTop: 25}}>
                        <Item floatingLabel>
                            <Label>Name</Label>
                            <Input
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                onChangeText={(name) => this.setUsername(name)}
                                value={user.name}
                                onSubmitEditing={Keyboard.dismiss}
                                //keyboardType={'numeric'}
                            />
                        </Item>
                        <Item floatingLabel>
                            <Label>Age</Label>
                            <Input
                                keyboardType={'numeric'}
                                onChangeText={(age) => this.setAge(age)}
                                value={user.age}
                                maxLength={2}
                                onSubmitEditing={Keyboard.dismiss}
                            />
                        </Item>
                        <Item stackedLabel>
                            <Label>Gender</Label>
                            <Picker
                                iosHeader="Select one"
                                mode="dropdown"
                                selectedValue={user.gender}
                                onValueChange={(value) => this.onValueChange(value)}
                                placeholder='Tap to select gender'
                            >
                                <Picker.Item label="Male" value="M" />
                                <Picker.Item label="Female" value="F" />
                                <Picker.Item label="Prefer not to say" value="N" />
                            </Picker>
                        </Item>
                        <Button
                            style={{marginTop: 40}}
                            full
                            rounded
                            primary
                            onPress={() => this.saveData()}
                        >
                            <Text style={{color: 'white'}}>Save Changes</Text>
                        </Button>
                        <Button
                            style={{marginTop: 10}}
                            full
                            rounded
                            success
                            onPress={() => this.logOut()}
                        >
                            <Text>Log-Out</Text>
                        </Button>
                    </Form>
                </Content>

                </Container>
            </TouchableWithoutFeedback>
    )
} */

const Loader = ({isLoading}) => {
    return (
        <View
            style={{
                alignItems: 'center',
                justifyContent: 'center',
                top: 0,
                left: 0,
                position: 'absolute',
                height: height,
                width: width,
                backgroundColor: 'black',
                opacity: 0.5,
            }}
            >
                <ActivityIndicator large animating={isLoading} />
        </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    padding: 10
  },
});