import React, {Component} from 'react';
import {Field, reduxForm as form} from 'redux-form';
import {Dimensions,ScrollView,StyleSheet,View} from 'react-native';
import {
    Button,
    FormLabel,
    FormInput,
} from 'react-native-elements';
import { connect } from 'react-redux';
import Spinner from 'react-native-loading-spinner-overlay';
import { Grid, Col, Row, List, ListItem, InputGroup, Input, Text } from 'native-base';

import {signupUser} from '../actions/UserActions';
import ErrorBox from '../components/ErrorBox';
import cs from '../constants/SharedStyles';

const renderInput = ({ meta, input: { onChange, ...restInput }}) => {
  const border = (meta.touched && meta.error) ? cs.borderError : cs.borderP2;
  return (
    <Row style={[border, cs.borderBWidth1]}>
      <Input
          stackedLabel
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={onChange}
          style={[cs.color000, cs.pl0, cs.f405]}
          {...restInput}
      />
    </Row>
  )
}

/**
 * Signup Screen
 */
@form({
  form: 'signup',
  validate: (values) => {
    const errors = {};

    if (!values.email) {
      errors.email = 'Email is required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }

    return errors;
  }
})
@connect((state) => {
  return {
    error: state.user.error,
  }
}, { signupUser })
class SignupScreen extends Component {
    static route = {
        navigationBar: {
            visible: false
        }
    }

    signupUser = (formProps) => {
      this.props.signupUser(formProps);
    }

    renderError = (error) => {
        return <ErrorBox message={error} />;
    }

    render = () => {
        const {handleSubmit, pristine, submitting} = this.props;

        return (
            <View animation="zoomInUp" style={[cs.container, cs.bgP4]}>
                <ScrollView style={{marginTop:50}}>
                    <View style={[cs.ml4, cs.mr4]}>
                        <Grid>
                            <Row>
                                <Text style={[cs.f2, cs.fw4, cs.color000]}>
                                    Sign Up
                                </Text>
                            </Row>
                        </Grid>
                        <Grid style={[cs.mt3]}>
                            <Row>
                                <Text style={[cs.f5, cs.fw4, cs.color000]}>
                                    First Name
                                </Text>
                            </Row>
                            <Row style={[cs.borderP2, cs.borderBWidth1]}>
                                <Field type="text" component={renderInput} name="first_name" />
                            </Row>
                            <Row style={[cs.mt2]}>
                                <Text style={[cs.f5, cs.fw4, cs.color000]}>
                                    Last Name
                                </Text>
                            </Row>
                            <Row style={[cs.borderP2, cs.borderBWidth1]}>
                                <Field type="email" component={renderInput} name="last_name" />
                            </Row>
                            <Row style={[cs.mt2]}>
                                <Text style={[cs.f5, cs.fw4, cs.color000]}>
                                    Email
                                </Text>
                            </Row>
                            <Row style={[cs.borderP2, cs.borderBWidth1]}>
                                <Field type="text" component={renderInput} name="email" autocapitalize="none" />
                            </Row>
                            <Row style={[cs.mt2]}>
                                <Text style={[cs.f5, cs.fw4, cs.color000]}>
                                    Phone
                                </Text>
                            </Row>
                            <Row style={[cs.borderP2, cs.borderBWidth1]}>
                                <Field type="text" component={renderInput} name="phone" autocapitalize="none" />
                            </Row>
                            <Row style={[cs.mt2]}>
                                <Text style={[cs.f5, cs.fw4, cs.color000]}>
                                    Password
                                </Text>
                            </Row>
                            <Row style={[cs.borderP2, cs.borderBWidth1]}>
                                <Field type="password" component={renderInput} name="password" autocapitalize="none" />
                            </Row>
                            {this.renderError(this.props.error)}
                        </Grid>
                        <Grid style={[cs.bg000, cs.radius5, cs.shadow1, cs.mt2]} onPress={handleSubmit(this.signupUser.bind(this))}>
                            <Row style={[cs.pl2, cs.pr2]}>
                                <Col style={[cs.pt105, cs.pb105]}>
                                    <Row style={[cs.selfCenter]}>
                                        <Text style={[cs.colorP2, cs.fw5, cs.f405]}>
                                            Get Started
                                        </Text>
                                    </Row>
                                </Col>
                            </Row>
                            <Spinner visible={submitting} />
                        </Grid>
                        <Grid>
                            <Row style={[cs.mt2, cs.ml4, cs.mr4]}>
                                <Text style={[cs.f6, cs.fw5, cs.color000, cs.tc]}>
                                    By clicking "Get Started" I agree to the terms of service
                                </Text>
                            </Row>
                        </Grid>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

export default SignupScreen