import React from 'react';
import classnames from 'classnames';
import Validator from 'validator';
import isEmpty from 'lodash/isEmpty';
import {userLoginRequest, saveToken} from  './actions';
import { browserHistory } from 'react-router';
class Login_Form extends React.Component{
	constructor(props){
		super(props);
		this.state  ={
			  username: '',	  
		      password: '',
		      errors: {}
		  }
		  this._onChange = this._onChange.bind(this);
		  this._onSubmit = this._onSubmit.bind(this);
	}
 	componentWillMount(){
 	}
 	_validateInput(data){
		var errors = {
		};
		  if (Validator.isEmpty(data.username)) {
	   	 	errors.username = 'This field is required';
		  }
		  if (Validator.isEmpty(data.password)) { 
		    errors.password = 'This field is required';
		  }
		return {
			errors,
			isValid: isEmpty(errors)
		}
	}
 	_onChange(e){
 		this.setState({ [e.target.name]: e.target.value });
 	}
 	_onSubmit(e){
 		e.preventDefault();
 		this.setState({errors: {}});
 		var check = this._validateInput(this.state);
		if(check.isValid){
			userLoginRequest(this.props.submitUrl, this.state).then(
			(data) => {
				if(!data.data.isSuccess)
				{
					this.setState({errors: data.data.errors});
				}
				else{
					saveToken(data.data.token);
					browserHistory.push(this.props.callbackUrl);
				}	
			}
			);
		}
		else{
			this.setState({errors: check.errors});
		}
 	}
 	componentDidMount(){
 	}
	render(){
		const { errors } = this.state;
		
		return(
				<form id ="login_form" onSubmit = {this._onSubmit} >
					<h1>Login</h1>
					<div className = {classnames('form-row', { 'has-error': errors.username })}>
						<label> username </label>
						<input
							type = "text"
							name = "username"
							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 = "form-row">
						<button>Submit</button>
					</div>
				</form>
			);
	}
}
export default Login_Form;