import { lazy } from 'react'

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

import { indexLexics } from 'config/lexics/indexLexics'
import { PAGES } from 'config'

import { StripeElements } from 'features/StripeElements'

import { useLexicsConfig } from 'features/LexicsStore'

import { ExtendedSearchStore } from 'features/ExtendedSearchPage'
import { MatchSwitchesStore } from 'features/MatchSwitches'
import { UserFavoritesStore } from 'features/UserFavorites/store'
import { MatchPopup, MatchPopupStore } from 'features/MatchPopup'
import { BuyMatchPopup, BuyMatchPopupStore } from 'features/BuyMatchPopup'
import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup'
import { CardsStore } from 'features/CardsStore'

const HomePage = lazy(() => import('features/HomePage'))
const UserAccount = lazy(() => import('features/UserAccount'))
const TeamPage = lazy(() => import('features/TeamPage'))
const MatchPage = lazy(() => import('features/MatchPage'))
const PlayerPage = lazy(() => import('features/PlayerPage'))
const TournamentPage = lazy(() => import('features/TournamentPage'))

export const AuthenticatedApp = () => {
  useLexicsConfig(indexLexics)

  return (
    <StripeElements>
      <CardsStore>
        <MatchSwitchesStore>
          <UserFavoritesStore>
            <ExtendedSearchStore>
              <PreferencesPopupStore>
                <MatchPopupStore>
                  <BuyMatchPopupStore>
                    <MatchPopup />
                    <BuyMatchPopup />
                    <PreferencesPopup />

                    {/* в Switch как прямой children можно рендерить только Route или Redirect */}
                    <Switch>
                      <Route path={PAGES.useraccount}>
                        <UserAccount />
                      </Route>
                      <Route exact path={PAGES.home}>
                        <HomePage />
                      </Route>
                      <Route path={`/:sportName${PAGES.tournament}/:pageId`}>
                        <TournamentPage />
                      </Route>
                      <Route path={`/:sportName${PAGES.team}/:pageId`}>
                        <TeamPage />
                      </Route>
                      <Route path={`/:sportName${PAGES.player}/:pageId`}>
                        <PlayerPage />
                      </Route>
                      <Route path={`/:sportName${PAGES.match}/:pageId`}>
                        <MatchPage />
                      </Route>
                      <Redirect to={PAGES.home} />
                    </Switch>
                  </BuyMatchPopupStore>
                </MatchPopupStore>
              </PreferencesPopupStore>
            </ExtendedSearchStore>
          </UserFavoritesStore>
        </MatchSwitchesStore>
      </CardsStore>
    </StripeElements>
  )
}