import {
  useEffect,
  useState,
  useCallback,
} from 'react'
import { useHistory } from 'react-router'

import type { TournamentInfo } from 'requests'
import {
  getMatchInfo,
  getTournamentInfo,
  getTournamentMatches,
  MatchInfo,
} from 'requests'

import { checkUrlParams, getAllUrlParams } from 'helpers/parseUrlParams/parseUrlParams'

import { usePageParams } from 'hooks/usePageParams'

import { useName } from 'features/Name'
import { isPermittedTournament } from '../../helpers/isPermittedTournament'
import { useProfileCard } from '../ProfileCard/hooks'
import { useBuyMatchPopupStore } from '../BuyMatchPopup'
import { MATCH_CONFIG } from '../BuyMatchPopup/store/hooks/useSubscriptions'
import { prepareMatchProfile } from '../MatchPage/helpers/prepareMatchProfile'

export const useTournamentPage = () => {
  const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
  const { profileId: tournamentId, sportType } = usePageParams()
  const { open: openBuyMatchPopup } = useBuyMatchPopupStore()
  const country = useName(tournamentProfile?.country || {})
  const history = useHistory()

  const { isFavorite, toggleFavorites } = useProfileCard()

  useEffect(() => {
    if (!isPermittedTournament(tournamentId, sportType)) {
      history.push('/')
    }
    getTournamentInfo(sportType, tournamentId)
      .then(setTournamentProfile)
  },
  [
    history,
    sportType,
    tournamentId,
  ])

  useEffect(() => {
    !isFavorite
    && checkUrlParams('from') === 'landing'
    && toggleFavorites()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const fetchMatches = useCallback(
    (limit: number, offset: number) => getTournamentMatches({
      limit,
      offset,
      sportType,
      tournamentId,
    }),
    [
      tournamentId,
      sportType,
    ],
  )

  const profile = tournamentProfile && {
    additionalInfo: tournamentProfile.country,
    name_eng: tournamentProfile.name_eng,
    name_rus: tournamentProfile.name_rus,
  }

  useEffect(() => {
    if ((checkUrlParams('subscribe')
            && getAllUrlParams('id'))) {
      getMatchInfo(MATCH_CONFIG.sportId, MATCH_CONFIG.matchId)
        .then((match: MatchInfo) => {
          const matchProfile = match && prepareMatchProfile({
            matchId: MATCH_CONFIG.matchId,
            profile: match,
            sportType: MATCH_CONFIG.sportId,
          })
          matchProfile && openBuyMatchPopup(matchProfile)
        })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return {
    fetchMatches,
    headerImage: tournamentProfile?.header_image,
    infoItems: [country],
    profile,
    tournamentId,
  }
}