import { List } from 'immutable';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Picker, ScrollView, Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';

import { getEmailAvailability, getNomAvailability } from '../../api/profile.js';

import EditNomDeBid from './EditNomDeBid.js';
import PhoneListInput from './PhoneInput/PhoneListInput.js';
import styles from './Profile.styles.js';

const STRINGS = {
    AVATAR_HEADING: 'Want to add a picture?',
    CANCEL: 'Cancel',
    EMAIL_HEADING: 'Email (this will be your username)',
    NOM_HEADING: 'and a Nom de Bid - your bidding alias!',
    PASSWORD_HEADING: 'For security, let\'s choose a password',
    PERSONAL_HEADING: 'Great! And now a bit about you...',
    SAVE_PROFILE: 'Save profile',
};

export default class EditProfile extends Component {
    static get propTypes() {
        return {
            addresses: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
            avatar: PropTypes.string,
            cancelEditAction: PropTypes.func.isRequired,
            email: PropTypes.string,
            firstName: PropTypes.string,
            initials: PropTypes.string,
            isGeneratedNomDeBid: PropTypes.bool,
            isGuided: PropTypes.bool,
            isRegsiteredAccount: PropTypes.bool,
            lastName: PropTypes.string,
            nomDeBid: PropTypes.string,
            phones: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
            saveProfileAction: PropTypes.func.isRequired,
            saveProfileLabel: PropTypes.string,
            showPasswordEntry: PropTypes.bool,
        };
    }

    static get defaultProps() {
        return {
            addresses: new List(),
            avatar: null,
            email: null,
            firstName: null,
            initials: null,
            isGeneratedNomDeBid: false,
            isGuided: false,
            isRegsiteredAccount: false,
            lastName: null,
            nomDeBid: null,
            phones: new List(),
            saveProfileLabel: STRINGS.SAVE_PROFILE,
            showPasswordEntry: false,
        };
    }

    static validatePasswordMatch(password, passwordCheck) {
        if ((!password || !passwordCheck) ||
            (password || passwordCheck && password.length === passwordCheck.length)
        ){
            return null;
        }

        return password === passwordCheck;
    }

    constructor(props) {
        super(props);

        this.state = {
            addresses: this.props.addresses,
            avatar: this.props.avatar,
            email: this.props.email,
            firstName: this.props.firstName,
            lastName: this.props.lastName,
            invalidEmail: null,
            nomDeBid: this.props.nomDeBid,
            password: this.props.password,
            passwordCheck: null,
            phones: this.props.phones,
        };

        this.handleCancel = this.handleCancel.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    _validateEmail() {
        getEmailAvailability(this.state.email)
            .then((result) => {
                console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result);
                this.setState({ invalidEmail: !result.available });
            });
    }

    getProfileFromState() {
        return {
            addresses: this.state.addresses.toArray(),
            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.toArray(),
        };
    }

    handleCancel() {
        this.props.cancelEditAction();
    }

    handleSubmit() {
        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.saveProfileAction(this.getProfileFromState());
    }

    isFormComplete() {
        const { showPasswordEntry } = this.props;
        const { password, passwordCheck } = this.state;

        return (
            !this.state.invalidEmail &&
            !this.state.invalidNomDeBid &&
            !!this.state.firstName &&
            !!this.state.lastName &&
            !!this.state.email &&
            !!this.state.nomDeBid &&
            !!this.state.phones.size &&
            ((showPasswordEntry && EditProfile.validatePasswordMatch(password, passwordCheck)) || !showPasswordEntry)
        );
    }

    render() {
        const { isGeneratedNomDeBid, isGuided, isRegsiteredAccount, showPasswordEntry } = this.props;
        const { addresses, avatar, firstName, invalidEmail, lastName, password, passwordCheck, phones } = this.state;
        const addressesTitle = 'Addresses';
        const numbersTitle = 'Numbers';

        return (
            <ScrollView style={styles.profileFormWrap}>
                <View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
                    <Text style={styles.groupHeading}>{STRINGS.EMAIL_HEADING}</Text>
                    <TextInput
                        autoCapitalize="none"
                        keyboardType="email-address"
                        onChangeText={(text) => this.setState({ email: text })}
                        onEndEditing={(text) => this._validateEmail(text)}
                        placeholder="email address"
                        style={[styles.textInput, styles.requiredInput]}
                        value={this.state.email || ''}
                    />
                    {invalidEmail === true && (
                        <View style={styles.emailTaken}>
                            <Text style={{color:'red'}}>{`You've already registered!`}</Text>
                            <Button title="Forgot Password" onPress={() => {}} />
                        </View>
                    )}
                    {invalidEmail === false && (
                        <Text style={{color:'green'}}>{`Great, lets add a bit more detail...`}</Text>
                    )}
                </View>
                {(!isGuided || (isGuided && invalidEmail === false)) && (
                    <View style={styles.rollDownPanel}>
                        <View style={[styles.sectionWrap, styles.nameWrap]}>
                            <Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
                            <TextInput
                                onChange={(text) => this.setState({ firstName: text })}
                                placeholder="first name"
                                style={[styles.textInput, styles.requiredInput]}
                                value={this.state.firstName || ''}
                            />
                            <TextInput
                                onChange={(text) => this.setState({ lastName: text })}
                                placeholder="last name"
                                style={[styles.textInput, styles.requiredInput]}
                                value={this.state.lastName || ''}
                            />
                        </View>
                        {showPasswordEntry &&
                            (!isGuided || (isGuided && firstName !== null && lastName !== null)) &&
                        (
                            <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
                                <Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
                                <TextInput
                                    onChangeText={(text) => this.setState({ password: text })}
                                    placeholder="password"
                                    secureTextEntry
                                    style={[styles.textInput, styles.requiredInput]}
                                />
                                <TextInput
                                    onChangeText={(text) => this.setState({ passwordCheck: text })}
                                    placeholder="re-enter password"
                                    secureTextEntry
                                    style={[styles.textInput, styles.requiredInput]}
                                />
                                {EditProfile.validatePasswordMatch(password, passwordCheck) === true && (
                                    <Text style={{ color: 'green' }}>{`That's a match!`}</Text>
                                )}
                                {EditProfile.validatePasswordMatch(password, passwordCheck) === false && (
                                    <Text style={{ color: 'red' }}>{`Well that's not a match...`}</Text>
                                )}
                            </View>
                        )}
                        {(isGeneratedNomDeBid || !isRegsiteredAccount) &&
                            (!isGuided || (isGuided && EditProfile.validatePasswordMatch(password, passwordCheck) === true)) &&
                        (
                            <View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
                                <Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
                                <EditNomDeBid
                                    isGeneratedNomDeBid={isGeneratedNomDeBid}
                                    isStandalone
                                    nomDeBid={this.state.nomDeBid}
                                    updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
                                />
                            </View>
                        )}
                        {(!isGuided || (isGuided && this.state.nomDeBid !== null)) && (
                            <View style={styles.rollDownPanel}>
                                <View style={[styles.sectionWrap, styles.phonesWrap]}>
                                    <PhoneListInput
                                        handleAdd={(phones) => this.setState({ phones })}
                                        handleDelete={(phones) => this.setState({ phones })}
                                        handleEdit={(phones) => this.setState({ phones })}
                                        phones={phones}
                                    />
                                </View>
                                <View style={[styles.sectionWrap, styles.addressesWrap]}>
                                    <Text style={styles.groupHeading}>{addressesTitle}</Text>
                                    {addresses !== null && addresses.size > 0 && (
                                        /* LIST ADDRESSES */
                                        <View />
                                    )}
                                    <Button title="Add address" onPress={() => false} />
                                </View>
                                <View style={[styles.sectionWrap, styles.avatarWrap]}>
                                    <Text style={styles.groupHeading}>{STRINGS.AVATAR_HEADING}</Text>
                                    {avatar !== null ? (
                                        <Avatar source={{ uri: this.state.avatar }} showEditButton />
                                    ) : (
                                        <Avatar title={this.props.initials} showEditButton />
                                    )}
                                </View>
                            </View>
                        )}
                        {(!isGuided || (isGuided && phones !== null && phones.size > 0)) && (
                            <View style={styles.register}>
                                <Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
                            </View>
                        )}
                    </View>
                )}
                <View style={styles.cancelWrap}>
                    <Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
                </View>
            </ScrollView>
        );
    }
}