import { lazy } from 'react'

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

import { RecoilRoot } from 'recoil'

import { indexLexics } from 'config/lexics/indexLexics'
import {
  client,
  PAGES,
  isProduction,
  isMobileDevice,
} 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 { BuyMatchPopupStore } from 'features/BuyMatchPopup'
import { PreferencesPopup, PreferencesPopupStore } from 'features/PreferencesPopup'
import { TournamentsPopup } from 'features/TournamentsPopup'
import { TournamentPopupStore } from 'features/TournamentsPopup/store'
import { CardsStore } from 'features/CardsStore'
import { NoNetworkPopup, NoNetworkPopupStore } from 'features/NoNetworkPopup'
import { NewDevicePopup } from 'features/NewDevicePopup'
import { useSportList } from 'features/App/hooks'

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'))
const SystemSettings = lazy(() => import('features/SystemSettings'))
const Landings = lazy(() => import('features/Landings'))
const HighlightsPage = lazy(() => import('pages/HighlightsPage'))

const ThanksPage = lazy(() => import('pages/ThanksPage'))
const Mailings = lazy(() => import('pages/Mailings'))
const FailedPaymeePage = lazy(() => import('pages/FailedPaymeePage'))
const SubscriptionsPage = lazy(() => import('pages/SubscriptionsPage'))

export const AuthenticatedApp = () => {
  useSportList()
  useLexicsConfig(indexLexics)
  return (
    <StripeElements>
      <NewDevicePopup />
      <RecoilRoot>
        <CardsStore>
          <MatchSwitchesStore>
            <UserFavoritesStore>
              <ExtendedSearchStore>
                <PreferencesPopupStore>
                  <TournamentPopupStore>
                    <MatchPopupStore>
                      <BuyMatchPopupStore>
                        <NoNetworkPopupStore>
                          <MatchPopup />
                          { client.name === 'facr' ? <TournamentsPopup /> : <PreferencesPopup /> }
                          <NoNetworkPopup />
                          {/* в Switch как прямой children
                          можно рендерить только Route или Redirect */}
                          <Switch>
                            <Route path={PAGES.mailings}>
                              <Mailings />
                            </Route>
                            <Route path={PAGES.failedPaymee}>
                              <FailedPaymeePage />
                            </Route>
                            <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>
                            <Route path={`${PAGES.thanksForSubscribe}`}>
                              <ThanksPage />
                            </Route>
                            <Route path={`${PAGES.highlights}`}>
                              <HighlightsPage />
                            </Route>
                            <Route path={`${PAGES.landing}`}>
                              <Landings />
                            </Route>
                            {isMobileDevice && (
                              <Route path={PAGES.subscriptions}>
                                <SubscriptionsPage />
                              </Route>
                            )}
                            <Redirect to={PAGES.home} />
                          </Switch>
                          {!isProduction && <SystemSettings />}
                        </NoNetworkPopupStore>
                      </BuyMatchPopupStore>
                    </MatchPopupStore>
                  </TournamentPopupStore>
                </PreferencesPopupStore>
              </ExtendedSearchStore>
            </UserFavoritesStore>
          </MatchSwitchesStore>
        </CardsStore>
      </RecoilRoot>
    </StripeElements>
  )
}