import React, { Component } from 'react';
import { StyleSheet, View, Text, StatusBar, TouchableOpacity } from 'react-native';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { compose } from 'redux';

import Logo from '../components/Logo';
import Form from '../components/From';
import InputText from '../components/InputText';

import { Actions } from 'react-native-router-flux';

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#455a64',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signupTextCont: {
    flexGrow: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
    marginVertical: 16,
    flexDirection: 'row'
  },
  signUpText: {
    color: '#fff',
    fontSize: 16,

  },
  signBtn: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  button: {
    width: 100,
    backgroundColor: '#1c313a',
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 16,

  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
    textAlign: 'center',
  },

  inputBox: {
    width: 300,
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: '#fff',
    marginVertical: 10,

  },

  errorText: {
    color: '#DC143C',
    fontSize: 14,
    paddingHorizontal: 16,
    paddingBottom: 8
  }
});


class Signup extends Component {

  goBack() {
    Actions.pop();
  }

  createNewUser = (values) => {
    this.props.dispatch(this.createNewUser(values));
  }

  onSubmit = (values) => {
    this.createNewUser(values);
  }

  renderTextInput = (field) => {
    const { meta: { touched, error }, label, secureTextEntry, maxLength, keyboardType, placeholder, input: { onChange, ...restInput } } =
      field;
    return (
      <View>
        <InputText
          onChangeText={onChange}
          maxLength={maxLength}
          placeholder={placeholder}
          keyboardType={keyboardType}
          secureTextEntry={secureTextEntry}
          label={label}
          {...restInput} />
        {(touched && error) && <Text style={styles.errorText}>{error}</Text>}
      </View>
    )
  }



  render() {
    const { handleSubmit } = this.props
    return (
      <View style={styles.container}>
        <Logo />
        {/* <Form type="Signup" onAuthButtonPress={this.createNewUser} /> */}

        <Field
          name="name"
          placeholder="Name"
          component={this.renderTextInput} />
        <Field
          name="email"
          placeholder="Email"
          component={this.renderTextInput} />
        <Field
          name="password"
          placeholder="Password"
          secureTextEntry={true}
          component={this.renderTextInput} />
        <TouchableOpacity style={styles.button} onPress={handleSubmit(this.onSubmit)}>
          <Text style={styles.buttonText}>Signup</Text>
        </TouchableOpacity>
        <View style={styles.signupTextCont}>
          <Text style={styles.signUpText}>Already have an account? </Text>
          <TouchableOpacity onPress={this.goBack}><Text style={styles.signBtn}>Login</Text></TouchableOpacity>
        </View>
      </View>
    )
  }
}

const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = "Name is required"
  }
  if (!values.email) {
    errors.email = "Email is required"
  }
  if (!values.password) {
    errors.password = "Password is required"
  }

  return errors;

}

mapDispatchToProps = (dispatch) => ({
  dispatch
});

export default compose (
  connect(null, mapDispatchToProps),
  reduxForm({
    form: "register",
    validate
  })
)(Signup);