import {
  useEffect,
  useMemo,
  useState,
} from 'react'

import {
  getMatchInfo,
  getTeamsStats,
  MatchInfo,
} from 'requests'

import { useInterval, usePageParams } from 'hooks'

import { TeamsStats } from 'features/MatchPage/store/hooks/useTeamsStats'
import { useLexicsConfig } from 'features/LexicsStore'

import { getStatsLexics } from 'pages/StatsView/helpers'

const INTERVAL_FETCH_STATS = 30 * 1000

export const useStatsView = () => {
  const [matchProfile, setMatchProfile] = useState<MatchInfo>(null)
  const [stats, setStats] = useState<TeamsStats>({})

  const {
    profileId,
    sportName,
    sportType,
  } = usePageParams()

  const fetchMatchInfo = async () => {
    if (!sportName || !profileId) return

    const profile = await getMatchInfo(sportType, profileId)
    setMatchProfile(profile)
  }

  const fetchStats = async () => {
    if (!sportName || !profileId) return

    const statistic = await getTeamsStats({
      matchId: profileId,
      sportName,
    })
    setStats(statistic)
  }

  const statsLexicIds = useMemo(
    () => getStatsLexics({ matchProfile, stats }),
    [matchProfile, stats],
  )

  useLexicsConfig(statsLexicIds)

  const { start, stop } = useInterval({
    callback: fetchStats,
    intervalDuration: INTERVAL_FETCH_STATS,
    startImmediate: false,
  })

  useEffect(() => {
    if (!sportName || !profileId) return undefined

    start()
    fetchStats()
    fetchMatchInfo()

    return () => stop()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    profileId,
    sportName,
  ])

  return {
    matchProfile,
    teamsStats: stats,
  }
}