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

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

const STRINGS = {
  NOM_EXPLANATION: 'Selecting a nom de bid allows you to bid anonymously - or not. By default, we\'ll use your first initial and last name.',
  SUBMIT_REGISTRATION: 'Register',
};

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}>Register</Text>
        <View style={styles.nameWrap}>
          <TextInput
            onChange={(text) => this.setState({ firstName: text })}
            placeholder="first name"
            style={styles.textInput}
            value={this.state.firstName}
          />
          <TextInput
            onChange={(text) => this.setState({ lastName: text })}
            placeholder="last name"
            style={styles.textInput}
            value={this.state.lastName}
          />
        </View>
        <View style={styles.emailWrap}>
          <TextInput
            keyboardType="email-address"
            onChangeText={(text) => _updateState('username', text)}
            onEndEditing={(text) => this._validateEmail(text)}
            placeholder="email address"
            style={styles.textInput}
            value={this.state.email}
          />
        </View>
        <View style={styles.nomWrap}>
          <Text style={styles.hintText}>{STRINGS.NOM_EXPLANATION}</Text>
          <TextInput
            keyboardType="email-address"
            onChangeText={(text) => _updateState('username', text)}
            onEndEditing={(text) => this._validateEmail(text)}
            placeholder="email address"
            style={styles.textInput}
            value={this.state.email}
          />
        </View>
        <View style={styles.register}>
          <Button title={STRINGS.SUBMIT_REGISTRATION} onPress={this._doRegistration} />
        </View>
      </View>
    );
  }
}