import React, { Component } from 'react';
import { connect } from 'react-redux';
import ContentContainer from './containers/ContentContainer.jsx';
import LogInContainer from './containers/login/LogInContainer.jsx';
import './App.css';
import './mainComponents/box/WiaasBox.css';
import NotificationBox from './mainComponents/notification/NotificationBox.jsx';
import DialogBox from './mainComponents/dialog/DialogBox.jsx';
import LoaderContainer from './containers/LoaderContainer';

class App extends Component {

  render() {
    const { isLoggedIn, updateMessages, isDialogOpen, dialogContent } = this.props;
    let hasAccesToken = localStorage.accessToken;

    return (<div className="App">

      {
        !isLoggedIn
          ? hasAccesToken ? (<LoaderContainer />) : (<LogInContainer />)
          : (<ContentContainer className="content" />)
      }
      <NotificationBox messages={updateMessages} />
      <DialogBox isDialogOpen={isDialogOpen} dialogContent={dialogContent} />
    </div>);
  }
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn,
  updateMessages: state.notificationReducer.updateMessages,
  isDialogOpen: state.dialogReducer.isDialogOpen,
  dialogContent: state.dialogReducer.dialogContent
});

export default connect(mapStateToProps)(App);