import React from 'react';
import { Router, Link, History } from 'react-router';
import { routeActions } from 'redux-simple-router';
import reactMixin from 'react-mixin';
import { connect } from 'react-redux';

import { login } from 'actions/session';
import { CAN_ACCESS_BZPRO, IS_BETA_USER } from 'utils/session';
import classnames from 'classnames';

class Login extends React.Component {
  componentDidMount() {
    this.checkSession(this.props.session);
  }
  componentWillReceiveProps(nextProps) {
    this.checkSession(nextProps.session);
  }
  onSubmit(e) {
    e.preventDefault();
    this.login();
  }
  login() {
    const { dispatch } = this.props;
    const { username, password } = this.state;

    dispatch(login(username, password));
  }
  checkSession(session) {
    const { dispatch } = this.props;
    const redirect = dest => {
      dispatch(routeActions.replace(dest));
    };

    if (session.isLoggedIn) {
      // Check to see if they can access pro
      if (!session.hasPerm(CAN_ACCESS_BZPRO)) {
        // Are they a beta user?
        if (session.hasPerm(IS_BETA_USER)) {
          return redirect('/pricing/?modal=beta_has_ended');
        }
        // No permissions / Benzinga.com user
        return redirect('/pricing/');
      }

      return redirect('/dashboard/');
    }
  }
  fieldChange(e, fieldName) {
    this.setState({[fieldName]: e.target.value});
  }
  render() {
    const { session } = this.props;

    return (
      <form className="pro-login" onSubmit={(e) => this.onSubmit(e)}>
        {session.error ? (<div className="pro-login__error">{session.error.message}</div>) : null}
        <div className="pro-login-wrap">
          <div className="pro-login__logo"></div>
          <h3 className="pro-login__toggle"><span>LOG IN</span><Link to="/pricing/">SIGN UP</Link></h3>
          <div className="pro-login__field pro-login__field--username">
            <input type="text" onChange={(e) => this.fieldChange(e, 'username')} placeholder="Username" />
          </div>
          <div className="pro-login__field pro-login__field--password">
            <input type="password" onChange={(e) => this.fieldChange(e, 'password')} placeholder="Password" />
          </div>
          <input type="submit" className={classnames('pro-login__submit', {loading: session.isLoading})} value="Log In" />
          <a href="https://www.benzinga.com/user/password" target="_blank" className="pro-login__forgot">Forgot your Benzinga.com password?</a>
        </div>
      </form>
    );
  }
}

Login.propTypes = {
  session: React.PropTypes.object,
  dispatch: React.PropTypes.func.isRequired
};

const selectSession = state => {
  return {
    session: state.session
  };
};

export default connect(selectSession)(Login);