import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { TuitioProvider } from "@flare/tuitio-client-react";
import { ThemeProvider } from "@material-ui/styles";
import { CssBaseline } from "@material-ui/core";
import Themes from "./themes";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { LayoutProvider } from "./contexts/LayoutContext";
import { ToastProvider } from "./contexts/ToastContext";
import "./utils/i18n";

ReactDOM.render(
  <LayoutProvider>
    <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
      <ThemeProvider theme={Themes.default}>
        <CssBaseline />
        <Suspense fallback={<div>Loading...</div>}>
          <ToastProvider>
            <App />
          </ToastProvider>
        </Suspense>
      </ThemeProvider>
    </TuitioProvider>
  </LayoutProvider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
