import React from "react";
import DocumentTitle from "react-document-title";
import { connect } from "react-redux";
import { openNewSimulationModal } from "../actions/modals/simulations";
import { fetchAuthorizationsOfCurrentUser } from "../actions/users";
import AppNavbar from "../components/navigation/AppNavbar";
import SimulationFilterPanel from "../components/simulations/FilterPanel";
import NewSimulationModal from "../containers/modals/NewSimulationModal";
import NewSimulationButtonContainer from "../containers/simulations/NewSimulationButtonContainer";
import VisibleSimulationList from "../containers/simulations/VisibleSimulationAuthList";

class SimulationsContainer extends React.Component {
  componentDidMount() {
    this.props.fetchAuthorizationsOfCurrentUser();
  }

  render() {
    return (
      <DocumentTitle title="My Simulations - OpenDC">
        <div className="full-height">
          <AppNavbar inSimulation={false} fullWidth={false} />
          <div className="container text-page-container full-height">
            <SimulationFilterPanel />
            <VisibleSimulationList />
            <NewSimulationButtonContainer />
          </div>
          <NewSimulationModal />
        </div>
      </DocumentTitle>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchAuthorizationsOfCurrentUser: () =>
      dispatch(fetchAuthorizationsOfCurrentUser()),
    openNewSimulationModal: () => dispatch(openNewSimulationModal())
  };
};

const Simulations = connect(undefined, mapDispatchToProps)(
  SimulationsContainer
);

export default Simulations;