import { useEffect, useState } from 'react'

import { getProfileColor } from 'requests/getProfileColor'

import { usePageParams } from 'hooks/usePageParams'

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,
  ])

  return color
}
