import { ProfileTypes, SportTypes } from 'config'
import { getProfileFallbackLogo, getProfileLogo } from 'helpers'

import { Image } from 'features/Common'
import type { ObjectWithName } from 'features/Name'
import { useName } from 'features/Name'

type ProfileImageProps = {
  alt?: string,
  altNameObj?: ObjectWithName,
  className?: string,
  id: number,
  lazy?: boolean,
  nameAsTitle?: boolean,
  onLoad?: () => void,
  prefix?: string,
  profileType: ProfileTypes,
  size?: number,
  sportType: SportTypes,
  title?: string,
}

export const ProfileLogo = ({
  alt,
  altNameObj,
  className,
  id,
  lazy = false,
  nameAsTitle,
  onLoad,
  prefix,
  profileType,
  size,
  sportType,
  title,
}: ProfileImageProps) => {
  const altName = useName(altNameObj || {}, prefix)
  const titleText = nameAsTitle ? altName : title
  const src = getProfileLogo({
    id,
    profileType,
    size,
    sportType,
  })
  const fallbackSrc = getProfileFallbackLogo(profileType)

  return (
    <Image
      alt={alt || altName}
      src={lazy ? '' : src}
      dataSrc={lazy ? src : ''}
      fallbackSrc={fallbackSrc}
      className={className}
      onLoad={onLoad}
      title={titleText}
    />
  )
}
