import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';
import './UserPage';
import avatar from '../../avatar.png';
import Back from '../../Back.js';
import {withRouter,BrowserRouter as  Link  } from 'react-router-dom';

class LoginForm extends Component {


  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

   componentWillReceiveProps(nextProps) {
    if (!nextProps.isLoginPending && this.props.isLoginPending) {
      if (nextProps.isLoginSuccess) {
         this.props.history.push('/UserPage')
      } else {
        console.log(this.props.loginError)
      }
    }
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <div>
            <Back/>
         <header>
   <h1 className="log">Company Login</h1>
   </header>

      <form name="loginForm" onSubmit={this.onSubmit}>

        <div className="imgcontainer">
    <img src={avatar} alt={"Avatar"} className={"avatar"}/>
  </div>

        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />


  </form>



     </div>
    )
  }


   onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}
LoginForm = withRouter(LoginForm);

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);