import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  Keyboard
} from 'react-native';

import {
    Container,
    Item,
    Label,
    Input,
    Header,
    Form,
    Content,
    Button,
    Picker
} from 'native-base';
import Dimensions from 'Dimensions';
import * as firebase from 'firebase';

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

export default class SignUp extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            email: '',
            password: '',
            name: '',
            age: '',
            gender: ''
        })
    }

    static navigationOptions = {
        title: 'SignUp',
    };

    writeUserData = (userId) => {
        const {name, email, age, gender} = this.state;
        firebase.database().ref('users/' + userId).set({
            name: name,
            email: email,
            age: age,
            gender: gender
        });
    }

    signUpUser = (email, password) => {
        firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((user) => {
            console.log(`user: ${JSON.stringify(user)}`);
            this.writeUserData(user.uid);
            this.props.navigation.goBack();
        })
        .catch((error) => {
            const {code, message} = error;
            alert(`${message}`);
        });
    }

    setPassword = (text) => {
        this.setState({
            password: text.replace(/[^0-9]/g, '')
        });
    }

    setAge = (age) => {
        this.setState({
            age: age.replace(/[^0-9]/g, '')
        })
    }

    setUsername = (name) => {
        this.setState({
            name: name
        });
    }

    selectGender = (value) => {
        this.setState({
            gender: value
        });
    }
  render() {
    return (
        <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
            <Container style={styles.container}>
                <Content>
                    <Form style={{marginTop: 10}}>
                        <Item floatingLabel error={false}>
                            <Label style={{padding: 5}}>Name</Label>
                            <Input
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                onChangeText={(name) => this.setUsername(name)}
                                maxLength={30}
                                //keyboardType={'numeric'}
                            />
                        </Item>
                        <Item floatingLabel style={{marginBottom: 10}}>
                            <Label style={{padding: 5}}>Age</Label>
                            <Input
                                value={this.state.age}
                                keyboardType={'numeric'}
                                onChangeText={(password) => this.setAge(password)}
                                value={this.state.age}
                                maxLength={2}
                            />
                        </Item>
                        <Label style={{marginLeft: 18, marginTop: 25}}>Gender</Label>
                            <Picker
                                style={{paddingTop: 0, width:(Platform.OS === 'ios') ? undefined : 120, marginLeft:(Platform.OS === 'ios') ? 3 : 10}}
                                iosHeader="Select one"
                                mode="dropdown"
                                selectedValue={this.state.gender}
                                onValueChange={(value) => this.selectGender(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>
                        <View style={{borderBottomColor: 'lightgray', borderBottomWidth: 1, width: width * 0.90, marginLeft: 17, marginTop: 3, marginBottom: 10}}/>
                        <Item floatingLabel style={{marginTop: 0, paddingTop: 0}}>
                            <Label style={{padding: 5}}>Email</Label>
                            <Input
                                autoCorrect={false}
                                autoCapitalize={'none'}
                                onChangeText={(email) => this.setState({email})}
                            />
                        </Item>
                        <Item floatingLabel>
                            <Label style={{padding: 5}}>Password</Label>
                            <Input
                                secureTextEntry
                                onChangeText={(password) => this.setPassword(password)}
                                value={this.state.password}
                                keyboardType={'numeric'}
                            />
                        </Item>
                        <Button
                            style={{marginTop: 25}}
                            full
                            rounded
                            primary
                            onPress={() => this.signUpUser(this.state.email, this.state.password)}
                        >
                            <Text style={{color: 'white'}}>Sign-Up</Text>
                        </Button>
                    </Form>
                </Content>
            </Container>
        </TouchableWithoutFeedback>
    );
  }
}

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