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