import { Fragment } from 'react'

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

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

import { ProfileTypes, SportTypes } from 'config'
import { isLffClient } from 'config/clients'

import { usePageParams } from 'hooks/usePageParams'

import { TournamentType } from 'requests'

import { isMatchPage } from 'helpers/isMatchPage'

import {
  CountryFlag,
  FavoriteSign,
  Wrapper,
  StyledLink,
} 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 tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id)

  return (
    <Wrapper>
      {!isLffClient && (
        <Fragment>
          <SportIcon sport={sportType ?? sportTypeFromUrl} />
          <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
        </Fragment>
      )}
      <StyledLink
        id={tournament.id}
        isLeftSide={isLffClient}
        isMatchPage={isMatchPage()}
        profileType={ProfileTypes.TOURNAMENTS}
        sportType={sportType ?? sportTypeFromUrl}
      >
        <Name nameObj={tournament} />
      </StyledLink>
      {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
    </Wrapper>
  )
}