import React from 'react';
import ReactDOM from 'react-dom';
import "./i18n"
import App from './app';
import { Provider } from "react-redux";
import store, { persistor } from "@/state/store";
import { PersistGate } from "redux-persist/integration/react";
import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import moment, { Moment } from "moment";
import { studentTheme } from "@/ui/theme";
import { BrowserRouter } from "react-router-dom";
import MomentUtils from "@date-io/moment";

class LocalizedMomentUtils extends MomentUtils {
    getDatePickerHeaderText(date: Moment): string {
        return this.format(date, "d MMM yyyy");
    }
}

ReactDOM.render(
  <React.StrictMode>
      <Provider store={ store }>
          <PersistGate loading={ null } persistor={ persistor }>
              <StylesProvider injectFirst>
                  <MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
                      <ThemeProvider theme={ studentTheme }>
                          <BrowserRouter>
                              <App />
                          </BrowserRouter>
                      </ThemeProvider>
                  </MuiPickersUtilsProvider>
              </StylesProvider>
          </PersistGate>
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);