import React from 'react'
import { Switch, Route } from 'react-router-dom'

import { styled } from '@mui/system'
import { CssBaseline } from '@mui/material'
import fetchIntercept from 'fetch-intercept'

import { useUserContext } from 'contexts'

import Sponsor from 'routes/sponsor'
import Register from 'routes/sponsor/register'
import FrontPage from 'routes/frontpage'
import Invite from 'routes/invite'
import InviteLink from 'routes/invitelink'
import Footer from 'routes/components/footer'
import Header from 'routes/components/header'
import NotFound from 'routes/components/notFound'
import ProtectedRoute from 'components/protectedRoute'
import { registerLocale } from 'i18n-iso-countries'
import i18n_iso_countries_en from 'i18n-iso-countries/langs/en.json'
import i18n_iso_countries_nb from 'i18n-iso-countries/langs/nb.json'
import i18n_iso_countries_nn from 'i18n-iso-countries/langs/nn.json'
import GuestRegister from './guest/register'

const AppWrapper = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  fontSize: '1.6rem',
  minHeight: '100vh',
  marginTop: 'auto',
})

export default function App() {
  const { user, clearUserInfo } = useUserContext()

  // Load country names for the supported languages
  registerLocale(i18n_iso_countries_en)
  registerLocale(i18n_iso_countries_nb)
  registerLocale(i18n_iso_countries_nn)

  // Intercept fetch responses
  fetchIntercept.register({
    response(response) {
      if (user.auth && response.status === 401) {
        // Clear userInfo, if we get a 401 from the backend
        clearUserInfo()
      }
      return response
    },
  })

  return (
    <>
      <CssBaseline />
      <AppWrapper>
        <Header />
        <Switch>
          <Route exact path="/">
            <FrontPage />
          </Route>
          <ProtectedRoute path="/sponsor">
            <Sponsor />
          </ProtectedRoute>
          <ProtectedRoute path="/register">
            <Register />
          </ProtectedRoute>
          <Route path="/invitelink/" component={InviteLink} />
          <Route path="/invite/" component={Invite} />
          <Route path="/guestregister/" component={GuestRegister} />
          <Route>
            <NotFound />
          </Route>
        </Switch>
        <Footer />
      </AppWrapper>
    </>
  )
}