import { Fragment } from 'react'

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

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

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

import { usePageParams } from 'hooks/usePageParams'

import { TournamentType, SportInfo } from 'requests'

import { isMatchPage } from 'helpers/isMatchPage'

import {
  CountryFlag,
  CountryWrapper,
  FavoriteSign,
  SportWrapper,
  StyledLink,
  SubtitleMain,
  Tooltip,
  Wrapper,
} from './styled'
import {
  Time,
  MatchDate,
  Views,
} from '../MatchPage/components/MatchDescription/styled'

type Props = {
  countryId: number,
  countryInfo?: TournamentType,
  date?: string | null,
  sportInfo?: SportInfo,
  sportType?: SportTypes,
  time?: string | null,
  tournament: TournamentType,
}

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

  return (
    <Wrapper>
      <SubtitleMain>
        {!isLffClient && (
          <Fragment>
            <SportWrapper>
              <SportIcon
                size={isMobileDevice ? 10 : '0.65rem'}
                sport={sportType ?? sportTypeFromUrl}
              />
              {sportInfo && (
                <Tooltip>
                  <T9n t={sportInfo.lexic} />
                </Tooltip>
              )}
            </SportWrapper>
            <CountryWrapper>
              <CountryFlag src={`${URL_AWS}/media/flags/${countryId}.png`} />
              {countryInfo && (
                <Tooltip>
                  <Name nameObj={countryInfo} />
                </Tooltip>
              )}
            </CountryWrapper>
          </Fragment>
        )}
        <StyledLink
          id={tournament.id}
          isLeftSide={isLffClient}
          isMatchPage={isMatchPage()}
          profileType={ProfileTypes.TOURNAMENTS}
          sportType={sportType ?? sportTypeFromUrl}
        >
          <Name nameObj={tournament} />
        </StyledLink>
        {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
      </SubtitleMain>
      {time && date && (
        <Views>
          <Time>{time}</Time>
          <MatchDate>{date}</MatchDate>
        </Views>
      )}
    </Wrapper>
  )
}
