import PropTypes from "prop-types";
import {connect} from 'react-redux';
import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import routes from '../routes';
import Unauthenticated from '../components/Unauthenticated';
import Layout from "../components/Layout";

import {
  authenticate, fetchCredentials, logout,
  processes as processesAction,
  versions as versionsAction,
  plugins as pluginsAction
} from '../actions';

import { getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors';

const qs = require('qs');

class AppContainer extends Component {
  constructor (props) {
    super(props);

    this.queryStringAuthenticate();
  }

  queryStringAuthenticate() {
    if (!this.props.location.search) {
      return;
    }
    const token = qs.parse(this.props.location.search, {ignoreQueryPrefix: true}).token;
    const host = window.location.host;
    if (token === this.props.credentials.token && this.props.credentials.host === host) {
      return;
    }
    this.props.authenticate(host, token);
  }

  componentDidMount() {
    this.props.fetchCredentials();
  }

  requireAuthentication() {
    return this.props.credentials.token && this.props.credentials.host && !this.props.credentials.authenticated;
  }

  componentDidUpdate(){
    if (this.requireAuthentication()) {
      this.props.authenticate(this.props.credentials.host, this.props.credentials.token);
    }

    if (this.props.credentials.authenticated && !this.props.initialized) {
      this.props.fetchProcesses();
      this.props.fetchVersions();
      this.props.fetchPlugins();
    }
  }

  shouldRenderUnauthenticated() {
    return this.props.authenticationError || !this.props.credentials.authenticated;
  }

  render() {
    return (
      <Layout location ={this.props.location} logout={this.props.logout} credentials={this.props.credentials}>
        {this.shouldRenderUnauthenticated() ? <Unauthenticated credentials={this.props.credentials}
                                                               authenticate={this.props.authenticate}
                                                               error={this.props.authenticationError} /> : <React.Fragment>{routes}</React.Fragment>}
      </Layout>
    );
  }
}

AppContainer.propTypes = {
  credentials: PropTypes.object,
  initialized: PropTypes.bool,
  authenticationError: PropTypes.string,
  authenticate: PropTypes.func,
  logout: PropTypes.func,
  fetchCredentials: PropTypes.func,
  initBlockHeader: PropTypes.func,
  fetchProcesses: PropTypes.func,
  fetchPlugins: PropTypes.func,
  fetchVersions: PropTypes.func,
  location: PropTypes.object
};

function mapStateToProps(state) {
  return {
    initialized: getVersions(state).length > 0,
    credentials: getCredentials(state),
    authenticationError: getAuthenticationError(state)
  };
}

export default withRouter(connect(
  mapStateToProps,
  {
    authenticate: authenticate.request,
    logout: logout.request,
    fetchCredentials: fetchCredentials.request,
    fetchProcesses: processesAction.request,
    fetchVersions: versionsAction.request,
    fetchPlugins: pluginsAction.request
  },
)(AppContainer));

@@ -286,16 +286,69 @@
 Layout%22;
+%0Aimport LoginLayout from '../components/LoginLayout';
 %0A%0Aimport
@@ -1840,110 +1840,22 @@
    %3C
-Layout location =%7Bthis.props.location%7D logout=%7Bthis.props.logout%7D credentials=%7Bthis.props.credentials%7D
+React.Fragment
 %3E%0A  
@@ -1897,16 +1897,52 @@
 ated() ?
+%0A          %3CLoginLayout%3E%0A           
  %3CUnauth
@@ -1991,123 +1991,115 @@
 als%7D
-%0A                                                               authenticate=%7Bthis.props.authenticate%7D%0A            
+ authenticate=%7Bthis.props.authenticate%7D error=%7Bthis.props.authenticationError%7D /%3E%0A          %3C/LoginLayout%3E%0A
     
@@ -2096,32 +2096,34 @@
 yout%3E%0A          
+:%0A
                 
@@ -2120,82 +2120,123 @@
     
-                               error=%7Bthis.props.authenticationError%7D /%3E :
+%3CLayout location=%7Bthis.props.location%7D logout=%7Bthis.props.logout%7D credentials=%7Bthis.props.credentials%7D%3E%0A           
  %3CRe
@@ -2277,16 +2277,19 @@
 ent%3E
-%7D
 %0A      
+    
 %3C/La
@@ -2298,18 +2298,51 @@
 ut%3E%0A    
+    %7D%0A      %3C/React.Fragment%3E%0A    
 )
-;
 %0A  %7D%0A%7D%0A%0A

make use of new LoginLayout