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

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

import { usePageParams } from 'hooks/usePageParams'

import { useName } from 'features/Name'
import { isPermittedTournament } from '../../helpers/isPermittedTournament'

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

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

  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,
  }

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