import React, { Component } from 'react';
import { Text, View } from 'react-native';

import styles from './Register.styles.js';

export default class Register extends Component {
    static get propTypes() {
        return {
            checkEmail: PropTypes.func.isRequired,
            checkNomDeBid: PropTypes.func.isRequired,
            doRegistration: PropTypes.func.isRequired,
            //       invalidEmail: PropTypes.bool.isRequired,
            //       invalidNomDeBid: PropTypes.bool.isRequired,
        };
    }

    constructor() {
        super(props);

        this.state = {
            addresses: [],
            avatar: null,
            email: null,
            firstName: null,
            lastName: null,
            nomDeBid: null,
            invalidEmail: false,
            invalidNomDeBid: false,
            password: null,
            phones: [],
        };

        this._doRegistration = this._doRegistration.bind(this);
    }

    _doRegistration() {
        if (!this.isFormComplete()) {
            console.error('Incomplete form... how did the button become enabled?');
            alert('Please complete all of the required fields. They have bold labels.');
            return;
        }

        this.props.doRegistration(this.getUserRegistration());
    }

    _validateEmail() {
        this.props.checkEmail(this.state.email, (valid) => this.setState('invalidEmail', valid));
    }

    _validateNomDeBid() {
        this.props.checkNomDeBid(this.state.nomDeBid, (valid) =>
            this.setState('invalidNomDeBid', valid),
        );
    }

    getUserRegistration() {
        return {
            addresses: this.state.addresses,
            avatar: this.state.avatar,
            email: this.state.email,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            nomDeBid: this.state.nomDeBid,
            password: this.state.password,
            phones: this.state.phones,
        };
    }

    isFormComplete() {
        return (
            !this.state.invalidEmail &&
            !this.state.invalidNomDeBid &&
            !!this.state.firstName &&
            !!this.state.lastName &&
            !!this.state.email &&
            !!this.state.nomDeBid &&
            !!this.state.phones.length &&
            !!this.state.password
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>Sign In or Register</Text>
                <View style={styles.localLogin}>
                    <LocalLogin />
                </View>
                <View style={styles.services}>
                    <FacebookLogin />
                </View>
                <View style={styles.register}>
                    <Button onPress={this._doRegistration} />
                </View>
            </View>
        );
    }
}