import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import * as t from 'tcomb-form-native';
import { emailRegex } from '../lib/email';
import { Form } from './Form';
import { Button } from './Button';
import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
const componentTranslationKeys = translationKeys.flagship.registration;
const EmailType = t.refinement(t.String, (str) => {
    return emailRegex.test((str || '').trim());
});
EmailType.getValidationErrorMessage = (s) => {
    if (!s) {
        return FSI18n.string(componentTranslationKeys.form.emailAddress.error.missing);
    }
    else {
        return FSI18n.string(componentTranslationKeys.form.emailAddress.error.invalid);
    }
};
const PasswordType = t.refinement(t.String, (str) => {
    return str.length >= 6;
});
const styles = StyleSheet.create({
    defaultButtonStyle: {
        backgroundColor: '#867CDD',
        borderRadius: 5,
        borderColor: '#473BC7'
    }
});
export class RegistrationForm extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = () => {
            const value = this.form.getValue();
            if (value && this.props.onSubmit) {
                this.props.onSubmit(value);
            }
        };
        this.focusField = (fieldName) => {
            const field = this.form.getComponent(fieldName);
            const ref = field.refs.input;
            if (ref.focus) {
                ref.focus();
            }
        };
        this.handleChange = (value) => {
            this.setState({
                value
            });
        };
        this.state = { value: props.value };
        const ConfirmPasswordType = t.refinement(t.String, (value) => {
            return value === this.state.value.password;
        });
        ConfirmPasswordType.getValidationErrorMessage = (s) => {
            return FSI18n.string(componentTranslationKeys.errors.password.mismatch);
        };
        PasswordType.getValidationErrorMessage = (s) => {
            if (s.length < 6) {
                return FSI18n.string(componentTranslationKeys.errors.password.tooShort, {
                    characterCount: 6
                });
            }
            else {
                return FSI18n.string(componentTranslationKeys.errors.password.invalid);
            }
        };
        this.fieldsTypes = t.struct({
            firstName: t.String,
            lastName: t.String,
            emailAddress: EmailType,
            password: PasswordType,
            confirmPassword: ConfirmPasswordType
        });
        this.fieldsOptions = Object.assign({ firstName: {
                label: FSI18n.string(componentTranslationKeys.form.firstName.label),
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                onSubmitEditing: () => this.focusField('lastName'),
                error: FSI18n.string(componentTranslationKeys.form.firstName.error)
            }, lastName: {
                label: FSI18n.string(componentTranslationKeys.form.lastName.label),
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                onSubmitEditing: () => this.focusField('emailAddress'),
                error: FSI18n.string(componentTranslationKeys.form.lastName.error)
            }, emailAddress: {
                label: FSI18n.string(componentTranslationKeys.form.emailAddress.label),
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                keyboardType: 'email-address',
                onSubmitEditing: () => this.focusField('password'),
                error: FSI18n.string(componentTranslationKeys.form.emailAddress.error.invalid)
            }, password: {
                label: FSI18n.string(componentTranslationKeys.form.password.label),
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                onSubmitEditing: () => this.focusField('confirmPassword'),
                secureTextEntry: true,
                onChange: (e) => {
                    const currentVal = this.state.value;
                    const newVal = Object.assign({}, currentVal, { password: e.nativeEvent.text });
                    this.setState({
                        value: newVal
                    });
                }
            }, confirmPassword: {
                label: FSI18n.string(componentTranslationKeys.form.confirmPassword.label),
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                secureTextEntry: true
            } }, props.fieldsOptions);
        this.fieldsStyleConfig = Object.assign({ textbox: {
                normal: {
                    borderRadius: 15,
                    fontSize: 12,
                    color: '#000'
                },
                error: {
                    borderRadius: 15,
                    fontSize: 12,
                    color: '#7f0000'
                }
            }, errorBlock: {
                fontSize: 11
            } }, props.fieldsStyleConfig);
    }
    render() {
        return (<View>
        <Form ref={ref => (this.form = ref)} fieldsTypes={this.fieldsTypes} fieldsOptions={this.fieldsOptions} fieldsStyleConfig={this.fieldsStyleConfig} value={this.state.value} onChange={this.handleChange}/>
        <Button title={FSI18n.string(componentTranslationKeys.actions.submit.actionBtn)} onPress={this.handleSubmit} style={styles.defaultButtonStyle}/>
      </View>);
    }
}
//# sourceMappingURL=RegistrationForm.js.map