import React, { Component } from 'react';
import { View } from 'react-native';
import * as t from 'tcomb-form-native';
import { emailRegex } from '../lib/email';
import { Form, FormLabelPosition } from './Form';
import { Button } from './Button';
const EmailType = t.refinement(t.String, (str) => {
    return emailRegex.test((str || '').trim());
});
EmailType.getValidationErrorMessage = (s) => {
    if (!s) {
        return 'Email is required';
    }
    else {
        return `${s} is not an valid email`;
    }
};
export class LoginForm 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 };
        this.fieldsTypes = t.struct({
            emailAddress: EmailType,
            password: t.String
        });
        this.fieldsOptions = Object.assign({ emailAddress: {
                label: 'Email',
                placeholder: 'Email',
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                keyboardType: 'email-address',
                onSubmitEditing: () => this.focusField('password'),
                error: 'Please enter a valid email'
            }, password: {
                label: 'Password',
                placeholder: 'Password',
                returnKeyType: 'next',
                autoCorrect: false,
                autoCapitalize: 'none',
                secureTextEntry: true,
                error: 'Please enter your password'
            } }, props.fieldsOptions);
        this.fieldsStyleConfig = Object.assign({}, props.fieldsStyleConfig);
        this.labelPosition = (typeof props.labelPosition === 'number') ?
            props.labelPosition : FormLabelPosition.Inline;
    }
    render() {
        const { style, submitButtonStyle, submitText } = this.props;
        return (<View style={style}>
        <Form ref={ref => (this.form = ref)} fieldsTypes={this.fieldsTypes} fieldsOptions={this.fieldsOptions} fieldsStyleConfig={this.fieldsStyleConfig} labelPosition={this.labelPosition} value={this.state.value} onChange={this.handleChange}/>
        <Button title={submitText || 'Submit'} onPress={this.handleSubmit} style={submitButtonStyle}/>
      </View>);
    }
}
//# sourceMappingURL=LoginForm.js.map