/**
 * Site router and custom pages
 */

import React, { Component } from "react";
import { ConnectedRouter } from "connected-react-router";
import { Route } from "react-router";
import { connect } from "react-redux";

import ViewerContainer from "site/viewer/viewer.container";
import Home from "site/projects/museum/views/home";
import Essay from "site/projects/museum/views/essay";
import Artists from "site/projects/museum/views/artists";
import Credits from "site/projects/museum/views/credits";
import NavOverlay from "site/projects/museum/views/nav.overlay";
import StlOverlay from "site/projects/museum/views/stl.overlay";

import "site/projects/museum/views/mobile.css";

import { loadMuseum } from "site/projects/museum/museum.actions";

class App extends Component {
  componentDidMount() {
    loadMuseum();
  }

  render() {
    if (!this.props.ready) {
      return <div />;
    }
    return (
      <ConnectedRouter history={this.props.history}>
        <div className="app">
          <Route
            path={"/thelastmuseum/:page_name"}
            component={ViewerContainer}
            exact
          />
          <Route path={"/thelastmuseum/start"} component={Home} exact />
          <Route path={"/thelastmuseum/essay"} component={Essay} exact />
          <Route path={"/thelastmuseum/artists"} component={Artists} exact />
          <Route path={"/thelastmuseum/credits"} component={Credits} exact />
          <Route
            path={"/thelastmuseum/:page_name"}
            component={StlOverlay}
            exact
          />
          <Route
            path={"/thelastmuseum/:page_name"}
            component={NavOverlay}
            exact
          />
          <Route
            path="/thelastmuseum/"
            exact
            render={() => {
              setTimeout(
                () => this.props.history.push("/thelastmuseum/start"),
                10
              );
              return null;
            }}
          />
          <Route
            path="/"
            exact
            render={() => {
              setTimeout(
                () => this.props.history.push("/thelastmuseum/start"),
                10
              );
              return null;
            }}
          />
        </div>
      </ConnectedRouter>
    );
  }
}

const mapStateToProps = (state) => ({
  ready: state.site.ready,
});

export default connect(mapStateToProps)(App);