import { memo, useEffect } from 'react'
import { useRouteMatch } from 'react-router-dom'
import { useQuery } from 'react-query'

import { isMobileDevice, PAGES } from 'config'

import type { AdType, LiveScore } from 'requests'
import { getLiveScores } from 'requests'

import { MatchCard } from 'features/MatchCard'
import { TournamentList } from 'features/TournamentList'
import type { Match } from 'features/Matches'
import { useHeaderFiltersStore } from 'features/HeaderFilters'

import { readToken } from 'helpers'

import { useRecoilValue } from 'recoil'
import { Wrapper } from './styled'
import { useMatchSwitchesStore } from '../MatchSwitches'
import { querieKeys } from '../../config'
import { AdComponent } from '../../components/Ads/components/AdComponent'
import { adsStore } from '../../pages/HighlightsPage/storeHighlightsAtoms'

type MatchesGridProps = {
  matches: Array<Match>,
}

export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
  const isHomePage = useRouteMatch(PAGES.home)?.isExact
  const { isScoreHidden } = useMatchSwitchesStore()

  const ads = useRecoilValue(adsStore)

  const currentAds = ads?.match_cell?.length ? ads?.match_cell : ads?.block

  const {
    compareSport,
    isShowTournament,
    selectedDate,
    selectedFilters,
    selectedLeague,
    selectedSport,
    updateSportIds,
  } = useHeaderFiltersStore()

  const filteredMatches = () => {
    if (isHomePage && selectedFilters.length && isShowTournament) {
      return matches.filter(
        (match) => (match.live && selectedFilters.indexOf('live') >= 0)
            || (selectedFilters.indexOf('upcoming') >= 0
            && match.date > new Date())
            || (selectedFilters.indexOf('completed') >= 0 && match.is_finished),
      )
    }
    if (isHomePage && selectedLeague.length && !isShowTournament) {
      return matches.filter((match) => ((selectedLeague.indexOf(`${match.sportType}_${match.tournament.id}`) >= 0
      || selectedLeague[0] === 'all_competitions')))
    }

    if (isHomePage && selectedSport) {
      return matches.filter((match) => compareSport(match, selectedSport))
    }

    return matches
  }

  const { data: liveMatchScores } = useQuery({
    queryFn: async () => {
      if (!isScoreHidden && matches.filter(({ live }) => live)?.length > 0) {
        const scores = await getLiveScores()
        return scores
      }
      return []
    },
    queryKey: querieKeys.liveMatchScores,
    refetchInterval: 5000,
  })

  useEffect(() => {
    if (!isHomePage) return

    updateSportIds(matches)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedDate, matches])

  return (
    <Wrapper>
      {!isMobileDevice
          && readToken()
          && currentAds
          && (
            currentAds?.map((ad: AdType) => <AdComponent ad={ad} />)
          )}
      {isHomePage && isShowTournament ? (
        <TournamentList matches={filteredMatches()} />
      ) : (
        filteredMatches().map((match) => (
          <MatchCard
            key={match.id}
            match={match}
            score={liveMatchScores?.find(
              ({ match_id, sport_id }: LiveScore) => match_id === match.id
                  && sport_id === match.sportType,
            )}
          />
        ))
      )}
    </Wrapper>
  )
})