import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import browserHistory from 'react-router/lib/browserHistory';

import { checkIfUserLoggedInAction, doLoginAction } from '../actions/Login';

class Login extends Component {
  static propTypes = {
    checkIfUserLoggedInAction: PropTypes.func.isRequired,
    doLoginAction: PropTypes.func.isRequired
  }

  constructor() {
    super();

    this.state = {
      username: '',
      password: ''
    };

    this.handleOnChange = this.handleOnChange.bind(this);
    this.handleOnSubmit = this.handleOnSubmit.bind(this);
  }

  componentDidMount() {
    const ifLoggedIn = this.props.checkIfUserLoggedInAction();
    if (ifLoggedIn) {
      browserHistory.replace({
        pathname: '/dashboard'
      });
    }
  }

  handleOnChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  handleOnSubmit(e) {
    e.preventDefault();
    const { username, password } = this.state;
    const data = {
      username,
      password
    };

    this.props.doLoginAction(data);
  }

  render() {
    const { username, password } = this.state;

    return (
      <div className="login-form">
        <form onSubmit={this.handleOnSubmit}>
          <div className="form-group">
            <input type="text" name="username" id="username" value={username} onChange={this.handleOnChange} />
          </div>
          <div className="form-group">
            <input type="text" name="password" id="password" value={password} onChange={this.handleOnChange} />
          </div>
          <div className="form-actioon">
            <input type="submit" value="Login" />
          </div>
        </form>
      </div>
    )
  }

export default connect(() => {}, {
  checkIfUserLoggedInAction,
  doLoginAction,
})(Login)