import React from 'react';
import classnames from 'classnames';
import Validator from 'validator';
import isEmpty from 'lodash/isEmpty';
import {userSignupRequest, saveToken} from  './actions';
import { browserHistory } from 'react-router';
class Signup_Form extends React.Component{
	constructor(props){
		super(props);
		this.state  ={
		  username: '',
	      email: '',
	      password: '',
	      passwordConfirmation: '',
	      errors: {}

		  }
		  this._onChange = this._onChange.bind(this);
		  this._onSubmit = this._onSubmit.bind(this);
		  this._onSignUpSuccess = this._onSignUpSuccess.bind(this);
	}
 	componentWillMount(){
 	}
 	conponentWillUnmount(){
 	}
 	_validateInput(data){
		var errors = {
		};
		  if (Validator.isEmpty(data.username)) {
	   	 	errors.username = 'This field is required';
		  }

		  if (Validator.isEmpty(data.email) || !Validator.isEmail(data.email)) {
		    errors.email = 'Email is empty or invalid';
		  }

		  if (Validator.isEmpty(data.password)) {
		    errors.password = 'This field is required';
		  }

		  if (Validator.isEmpty(data.passwordConfirmation)) {
		    errors.passwordConfirmation = 'This field is required';
		  }

		  if (!Validator.equals(data.password, data.passwordConfirmation)) {
		    errors.passwordConfirmation = 'Passwords must match';
		  }
		return {
			errors,
			isValid: isEmpty(errors)
		}
	}
 	_onChange(e){
 		this.setState({ [e.target.name]: e.target.value });
 	}
 	_onSignUpSuccess(data){
 		this.setState({errors: {}});
 	}
 	_onSubmit(e){
 		e.preventDefault();
 		this.setState({errors: {}});
 		var check = this._validateInput(this.state);
		if(check.isValid){
			userSignupRequest(this.props.submitUrl, this.state).then(
			 (data) => {
				if(!data.data.isSuccess)
				{
					this.setState({errors: data.data.error});
				}
				else{
					saveToken(data.data.token);
					browserHistory.push(this.props.callbackUrl);
				}	
				}
			);
		}
		else{
			this.setState({errors: check.errors});
		}
	}
 	componentDidMount(){

 	}
	render(){
		let errors = Object.assign({}, this.state.errors);
		return(
				<form id ="signup_form" onSubmit = {this._onSubmit} >
					<h1>Sign Up</h1>
					<div className = {classnames('form-row', { 'has-error': errors.username})}>
						<label> User Name </label>
						<input
							type = "text"
							name = "username"
							onChange={this._onChange}
							className = "form-control"
						/>
					</div>
					<div className = {classnames('form-row', { 'has-error': errors.email })}>
						<label> Email </label>
						<input
							type = "text"
							name = "email"
							onChange={this._onChange}
							className = "form-control"
						/>
					</div>
					<div  className = {classnames('form-row', { 'has-error': errors.password })}>
						<label> Password </label>
						<input
							type = "password"
							name = "password"
							onChange={this._onChange}
							className = "form-control"
						/>
					</div>
					<div  className = {classnames('form-row', { 'has-error': errors.passwordConfirmation })}>
						<label> Confirm Password </label>
						<input
							type = "password"
							name = "passwordConfirmation"
							onChange = {this._onChange}
							className = "form-control"
						/>
					</div>
					<div className = "form-row">
						<button>Submit</button>
					</div>
				</form>
			);
	}
}

export default Signup_Form;