import React, { ReactElement } from 'react';
import { IntlProvider } from 'react-intl';
import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';

import RegistrationSuccessPage from './components/registration-success-page';
import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
import RegistationPage from './components/registration-page';
import LoginPage from './components/login-page';
import store from "./redux/store";
import { ForgotPasswordPage } from './components/forgot-password-page';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query';
import { theme } from './theme'
import AppI18n, { Locales } from './classes/app-i18n';
import MapsPage from './components/maps-page';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchIntervalInBackground: false,
      staleTime: 5 * 1000 * 60 // 10 minutes
    }
  }
});

const App = ():ReactElement => {
  const appi18n = new AppI18n();
  const locale = appi18n.getBrowserLocale();

  return locale.message ? (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <IntlProvider locale={locale.code} defaultLocale={Locales.EN.code} messages={locale.message as Record<string, string> }>
          <CssBaseline />
          <ThemeProvider theme={theme}>
            <Router>
              <Switch>
                <Route exact path="/">
                  <Redirect to="/c/login" />
                </Route>
                <Route path="/c/login" component={LoginPage} />
                <Route path="/c/registration">
                  <RegistationPage />
                </Route>
                <Route path="/c/registration-success" component={RegistrationSuccessPage} />
                <Route path="/c/forgot-password">
                  <ForgotPasswordPage />
                </Route>
                <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
                <Route path="/c/maps/">
                  <MapsPage />
                </Route>
              </Switch>
            </Router>
          </ThemeProvider>
        </IntlProvider>
      </QueryClientProvider>
    </Provider>

  ) : (<div>Loading ... </div>)
}

export default App;