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'
import { NoNetworkPopup, NoNetworkPopupStore } from 'features/NoNetworkPopup'

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>
                    <NoNetworkPopupStore>
                      <MatchPopup />
                      <BuyMatchPopup />
                      <PreferencesPopup />
                      <NoNetworkPopup />

                      {/* в 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>
                    </NoNetworkPopupStore>
                  </BuyMatchPopupStore>
                </MatchPopupStore>
              </PreferencesPopupStore>
            </ExtendedSearchStore>
          </UserFavoritesStore>
        </MatchSwitchesStore>
      </CardsStore>
    </StripeElements>
  )
}
