import React, { Component } from 'react';
import {
    StyleSheet, Text, View, TextInput,
    TouchableOpacity,Button,Alert
} from 'react-native';
import RadioGroup from "react-native-radio-buttons-group";
import app, { db } from '../config/fire';
import { Formik } from 'formik'
import * as yup from 'yup'

import Logo from './Logo';


class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            contactNumber: '',
            isMobile: true,
            user_type: '',
            user: {},
            userId: '',
            data: [
                {
                    label: "Responder",
                    value: "Responder",
                    color: "white",
                },
                {
                    label: "Regular User",
                    value: "Regular User",
                    color: "white",
                },
                {
                    label: "Volunteer",
                    value: "Volunteer",
                    color: "white",
                },
            ]
        };
    }

    userType = data => {
        this.setState({ data });

        let selectedButton = this.state.data.find(e => e.selected == true);
        selectedButton = selectedButton
            ? selectedButton.value
            : this.state.data[0].label;
        this.setState({ user_type: selectedButton });

    };

    createUserAccount(values) {

        var email = this.values.email;
        var password = this.values.password;
        const auth = app.auth();
        const promise = auth.createUserWithEmailAndPassword(email.trim(), password.trim());

        promise.then(user => {
            console.log('account created');
            let app = db.ref('users/' + user.user.uid);

            app.update({
                email: this.values.email,
                password: this.values.password,
                contactNumber: this.values.contactNumber,
                isMobile: true,
                user_type: this.state.user_type,
            });

        });
        promise.catch(e => {
            var err = e.message;
            console.log(err);
        })
        console.log("loog", this.values.email, this.values.password);
    };


    render() {
        return (
            <Formik initialValues={{email:'',contactNumber:'',password:''}}
            onSubmit={this.createUserAccount(values)}
            validationSchema={
                yup.object().shape({
                    email: yup
                    .string()
                    .email()
                    .required(),
                    contactNumber: yup
                    .string()
                    .required(),
                    password: yup
                    .string()
                    .required(),
                })
            }>
        {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (
            <View style={styles.container}>
                <TextInput style={styles.inputBox}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    placeholder="Email Address"
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"
                    keyboardType="email-address"
                    value={values.email}
                    onChangeText={handleChange('email')}
                    onBlur={() => setFieldTouched('email')}
                />
            {touched.email && errors.email &&
              <Text style={{ fontSize: 10, color: 'red' }}>{errors.email}</Text>
            }
                <TextInput style={styles.inputBox}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    placeholder="Contact Number"
                    placeholderTextColor="#ffffff"
                    selectionColor="#fff"
                    keyboardType="email-address"
                    value={values.contactNumber}
                    onChangeText={handleChange('contactNumber')}
                    onBlur={() => setFieldTouched('contactNumber')}
                />
            {touched.contactNumber && errors.contactNumber &&
              <Text style={{ fontSize: 10, color: 'red' }}>{errors.contactNumber}</Text>
            }
                <TextInput style={styles.inputBox}
                    underlineColorAndroid='rgba(0,0,0,0)'
                    placeholder="Password"
                    secureTextEntry={true}
                    placeholderTextColor="#ffffff"
                    value={values.password}
                    onChangeText={handleChange('password')}
                    onBlur={() => setFieldTouched('password')}

                />
            {touched.password && errors.password &&
              <Text style={{ fontSize: 10, color: 'red' }}>{errors.password}</Text>
            }
                <RadioGroup radioButtons={this.state.data} onPress={this.userType} />
                <TouchableOpacity style={styles.button}
                  disabled={!isValid}
                    onPress={handleSubmit}>

                    <Text style={styles.buttonText}>
                        Register
                    </Text>
                </TouchableOpacity>
            </View>
        )}
        </Formik>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flexGrow: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#455a64',
    },
    signupTextCont: {
        flexGrow: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',
        paddingVertical: 16,
        flexDirection: 'row'
    },
    signupText: {
        color: 'rgba(255,255,255,0.6)',
        fontSize: 16
    },
    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '500'
    },
    inputBox: {
        width: 300,
        backgroundColor: 'rgba(255, 255,255,0.2)',
        borderRadius: 25,
        paddingHorizontal: 16,
        fontSize: 16,
        color: '#ffffff',
        marginVertical: 10
    },
    button: {
        width: 300,
        backgroundColor: '#1c313a',
        borderRadius: 25,
        marginVertical: 10,
        paddingVertical: 13
    },
    buttonText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#ffffff',
        textAlign: 'center'
    }

});

export default Register;