import { useEffect } from 'react'
import { useHistory } from 'react-router'

import { ProfileHeader } from 'features/ProfileHeader'
import { UserFavorites } from 'features/UserFavorites'
import { useUserFavoritesStore } from 'features/UserFavorites/store'
import {
  PageWrapper,
  Main,
} from 'features/PageLayout'

import { FavoritesActions } from 'requests'
import { ProfileTypes } from 'config'

import { usePageLogger } from 'hooks/usePageLogger'
import { usePageParams } from 'hooks/usePageParams'
import { MatchPageStore } from './store'

import { SubscriptionGuard } from './components/SubscriptionGuard'
import { MatchProfileCard } from './components/MatchProfileCard'
import { LiveMatch } from './components/LiveMatch'
import { useMatchProfile } from './hooks/useMatchProfile'
import { Wrapper } from './styled'
import { FinishedMatch } from './components/FinishedMatch'

const MatchPageComponent = () => {
  usePageLogger()
  const history = useHistory()
  const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()

  const {
    events,
    isStarted,
    profile,
    tournamentData,
  } = useMatchProfile()

  const {
    profileType,
    sportType,
  } = usePageParams()

  useEffect(() => {
    let timer = 0
    timer = window.setTimeout(() => {
      const isFavorite = profile && userFavorites.find((fav) => fav.id === profile?.tournament.id)
      if (profile && !isFavorite) {
        addRemoveFavorite({
          action: FavoritesActions.ADD,
          id: profile?.tournament.id,
          isAuto: true,
          sport: sportType,
          type: ProfileTypes.TOURNAMENTS,
        })
      }
    }, 60000)

    return () => {
      clearTimeout(timer)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [profile, profileType])

  // TODO Добавить попап 'Данный матч ещё не начался'
  if (!isStarted && profile?.live === false) {
    const sportName = history.location.pathname.split('/')[1]
    history.push(`/${sportName}/tournaments/${profile.tournament.id}`)
  }

  return (
    <PageWrapper>
      <ProfileHeader color='#2B2A28' height={4.5}>
        <MatchProfileCard profile={profile} />
      </ProfileHeader>
      <Main>
        <UserFavorites />
        <SubscriptionGuard>
          <Wrapper>
            {playFromOTT && (
              <LiveMatch
                events={events}
                profile={profile}
                tournamentData={tournamentData}
              />
            )}
            {playFromScout && (
              <FinishedMatch
                events={events}
                profile={profile}
                tournamentData={tournamentData}
              />
            )}
            <LiveMatch />
          </Wrapper>
        </SubscriptionGuard>
      </Main>
    </PageWrapper>
  )
}

const MatchPage = () => (
  <MatchPageStore>
    <MatchPageComponent />
  </MatchPageStore>
)

export default MatchPage