import "isomorphic-fetch";
import * as React from "react";
import * as ReactDOM from "react-dom";
import {RouterProvider} from "react-router5";
import {setStylesTarget} from "typestyle";
import {App} from "./app/containers/App";

import {configureRouter} from "./app/routes/configureRouter";

const appConfig = require("../config/main");

const ReactHotLoader = appConfig.env !== "production"
  ? require("react-hot-loader").AppContainer
  : ({children}) => React.Children.only(children);

const router = configureRouter();

ReactDOM.hydrate(
  <ReactHotLoader>
    <RouterProvider router={router}>
      <App/>
    </RouterProvider>
  </ReactHotLoader>,
  document.getElementById("app")
);

setStylesTarget(document.getElementById("styles-target"));

if ((module as any).hot) {
  (module as any).hot.accept("./app/containers/App", () => {
    const {App: NewApp} = require("./app/containers/App");
    ReactDOM.hydrate(
      <ReactHotLoader>
        <RouterProvider router={router}>
          <NewApp/>
        </RouterProvider>
      </ReactHotLoader>,
      document.getElementById("app")
    );
  });
}