import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { routerActions } from 'connected-react-router';
import { CapRow, CapColumn } from '@capillarytech/cap-ui-library';
import { bindActionCreators } from 'redux';
import { createStructuredSelector } from 'reselect';
import makeSelectLogin from './selectors';
import messages from './messages';
import config from '../../config/app';
import LoginForm from './components/LoginForm';
import * as actions from '../Cap/actions';
import { UserIsNotAuthenticated } from '../../utils/authWrapper';
const logo = require('./assets/images/capillary_logo.png');

export class Login extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      message: '',
      isLoginError: false,
    };
  }

  componentWillMount() {
    const isAuthenticated = this.props.Login.token !== '';
    const replace = this.props.replace;
    if ((this.props.Login.login_progress === false) && (this.props.Login.fetching_userdata === false) && isAuthenticated) {
      replace(process.env.NODE_ENV === 'production' ? config.production.dashboard_url : config.development.dashboard_url);
    }
  }

  componentWillReceiveProps(nextProps) {
    const isAuthenticated = nextProps.Login.token !== undefined && nextProps.Login.token !== '';
    const wasAuthenticated = this.props.Login.token !== undefined && this.props.Login.token !== '';
    if (this.props.Login && this.props.Login.isError) {
      this.setState({ isLoginError: true });
    } else {
      this.setState({ isLoginError: false });
    }

    if (!wasAuthenticated && isAuthenticated) {
      let redirectUrl = process.env.NODE_ENV === 'production' ? config.production.dashboard_url : config.development.dashboard_url;
      if (this.props.location.query.redirect) redirectUrl = this.props.location.query.redirect;
      this.props.router.push({ pathname: redirectUrl, state: {} });
    }
  }

  render() {
    const loginProgress = this.props.Login.login_progress;
    return (
      <div className={this.props.Login.fetching_userdata ? "opacity-class" : ""}>
        <FormattedMessage {...messages.pageTitle}>{(message) =>
          <Helmet
            title={message}
            meta={[
              { name: 'description', content: <FormattedMessage {...messages.loginPage}/> },
            ]}
          />}
        </FormattedMessage>
        <CapRow align="middle" justify="center" type="flex" className="login-container">
          {process.env.NODE_ENV === "production"
          ? <div className="cap-loader-box">
            <img
              className="loader-image"
              src={"https://storage.crm.n.content-cdn.io/capillary/capillary_loading_logo.gif"}
              alt="Capillary"/>
          </div>
          : <CapColumn className="login-box" style={{textAlign: 'center'}}>
            <h2 className="ui image header">
              <img alt="" src={logo} className="login-logo" />
            </h2>
            <LoginForm isError={this.state.isLoginError} authenticate={this.props.actions.authenticate} loginInProgress={loginProgress} />
          </CapColumn>
          }
        </CapRow>
      </div>
    );
  }
}

Login.propTypes = {
  actions: PropTypes.object.isRequired,
  Login: PropTypes.object,
  replace: PropTypes.func,
  login_progress: PropTypes.bool,
  location: PropTypes.object,
  router: PropTypes.object,
};

const mapStateToProps = createStructuredSelector({
  Login: makeSelectLogin(),
});

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
    replace: routerActions.replace,
  };
}

export default UserIsNotAuthenticated(connect(mapStateToProps, mapDispatchToProps)(Login));
