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

import type { TeamInfo } from 'requests'
import { getTeamInfo } from 'requests'

import { useLexicsStore } from 'features/LexicsStore'

import { useSportNameParam, usePageId } from 'hooks'

type Name = 'name_rus' | 'name_eng'

export const useTeamPage = () => {
  const [teamProfile, setTeamProfile] = useState<TeamInfo>(null)
  const { sportType } = useSportNameParam()
  const teamId = usePageId()
  const { suffix } = useLexicsStore()

  const {
    [`name_${suffix}` as Name]: name = '',
  } = teamProfile || {}

  const {
    [`name_${suffix}` as Name]: country = '',
  } = teamProfile?.country || {}

  useEffect(() => {
    getTeamInfo(sportType, teamId)
      .then(setTeamProfile)
  },
  [
    sportType,
    teamId,
  ])

  const requestArgs = useMemo(() => ({
    sportType,
    teamId,
  }), [teamId, sportType])

  return {
    infoItems: [country],
    name,
    requestArgs,
    sportType,
  }
}