import { useEffect, useState } from 'react'

import { getProfileColor } from 'requests/getProfileColor'

import { usePageParams } from 'hooks/usePageParams'
import { getColor } from 'helpers/getColor'

import { SportTypes } from 'config'
import { client } from 'config/clients'
import { DEFAULT_HEADER_COLOR } from './styled'

export const useProfileColor = (profileId?: number) => {
  const {
    profileType,
    sportType,
  } = usePageParams()
  const [color, setColor] = useState(DEFAULT_HEADER_COLOR)

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

    getProfileColor({
      profileId,
      profileType,
      sportType,
    }).then(setColor)
  }, [
    profileId,
    profileType,
    sportType,
  ])

  // TODO remove this logic when backend will return the correct colors
  const prifileWithConfifColor = [
    227, 946, 3067, 5665, 23, 2719, 528, 17018, 567, 16306, 1189, 480, 16920, 6032, 17624, 114440,
  ]
  if (
    client.name === 'facr'
    && sportType === SportTypes.FOOTBALL && profileId && prifileWithConfifColor.includes(profileId)
  ) {
    return getColor(profileId)
  }

  return color
}