import { SportIcon } from 'components/SportIcon/SportIcon'

import { useName } from 'features/Name'
import { useUserFavoritesStore } from 'features/UserFavorites/store'

import { ProfileTypes, SportTypes } from 'config'

import { usePageParams } from 'hooks/usePageParams'

import { TournamentType } from 'requests'

import {
  CountryFlag,
  FavoriteSign,
  NameSignWrapper,
  Wrapper,
  TournamentName,
} from './styled'

type Props = {
  countryId: number,
  sportType?: SportTypes,
  tournament: TournamentType,
}

export const TournamentSubtitle = ({
  countryId,
  sportType,
  tournament,
}: Props) => {
  const { isInFavorites } = useUserFavoritesStore()
  const { sportType: sportTypeFromUrl } = usePageParams()
  const tournamentName = useName(tournament)
  const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id)

  return (
    <Wrapper>
      <SportIcon sport={sportType ?? sportTypeFromUrl} />
      <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
      {tournament && (
        <NameSignWrapper>
          <TournamentName title={tournamentName}>
            {tournamentName}
          </TournamentName>
          {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
        </NameSignWrapper>
      )}
    </Wrapper>
  )
}