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';

class App extends Component {
  render() {
    const {isLoggedIn, updateMessages, isDialogOpen, dialogContent} = this.props;

    return (<div className="App">

      {
        !isLoggedIn
          ? (<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);