import type { ObjectWithName } from 'features/Name'

import { ProfileTypes } from 'config'

import { T9n } from 'features/T9n'
import { useName } from 'features/Name'

import { StarIcon } from './components/StarIcon'
import {
  Wrapper,
  Details,
  FavoriteButton,
  Logo,
  InfoName,
  InfoItems,
  ProfileName,
  InfoFlag,
  StyledLink,
} from './styled'
import { useProfileCard } from './hooks'

type Props = {
  profile: ObjectWithName & {
    additionalInfo: ObjectWithName & {
      id: number,
      tournamentId?: number,
    },
  },
}

export const ProfileCard = ({ profile }: Props) => {
  const name = useName(profile || {})

  const {
    isFavorite,
    profileId,
    profileType,
    sportType,
    toggleFavorites,
  } = useProfileCard()

  const tournamentId = profile.additionalInfo?.tournamentId

  return (
    <Wrapper>
      <Logo
        id={profileId}
        alt={name}
        profileType={profileType}
        sportType={sportType}
      />
      <Details>
        <ProfileName>{name}</ProfileName>
        <InfoItems>
          <InfoFlag src={`https://instatscout.com/images/flags/48/${profile.additionalInfo.id}.png`} />
          {tournamentId
            ? (
              <StyledLink
                id={tournamentId}
                profileType={ProfileTypes.TOURNAMENTS}
                sportType={sportType}
              >
                <InfoName nameObj={profile.additionalInfo} />
              </StyledLink>
            )
            : <InfoName nameObj={profile.additionalInfo} />}
        </InfoItems>
        <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
          <StarIcon isFavorite={isFavorite} />
          <T9n t='add_to_favorites' />
        </FavoriteButton>
      </Details>
    </Wrapper>
  )
}
