import React, { Suspense, useEffect } from "react";
import PropTypes from "prop-types";
import { Route, Switch } from "react-router-dom";
import HomePage from "./home/HomePage";
import Header from "./layout/Header";
import PageNotFound from "./PageNotFound";
import SessionContainer from "../features/session/components/SessionContainer";
import ReleaseNotesContainer from "../features/releaseNotes/components/ReleaseNotesContainer";
import AboutContainer from "../features/about/components/AboutContainer";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { loadFrontendSession } from "../features/frontendSession/actionCreators";
import ToastNotifier from "../features/snackbar/components/ToastNotifier";
import BotsManager from "../features/chatbot/components/BotsManager";

function App({ actions }) {
  useEffect(() => {
    actions.loadFrontendSession();
  }, []);

  const contentStyle = {
    paddingLeft: "30px",
    paddingRight: "30px"
  };

  return (
    <Suspense fallback={<div></div>}>
      <Header />
      <BotsManager />
      <br />
      <div style={contentStyle}>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutContainer} />
          <Route path="/sessions" component={SessionContainer} />
          <Route path="/release-notes" component={ReleaseNotesContainer} />
          <Route component={PageNotFound} />
        </Switch>
        <ToastNotifier />
      </div>
    </Suspense>
  );
}

App.propTypes = {
  actions: PropTypes.object.isRequired
};

function mapStateToProps() {
  return {};
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ loadFrontendSession }, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);