import { format } from 'date-fns'

import type { MatchInfo } from 'requests/getMatchInfo'

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

import { parseDate } from 'helpers/parseDate'

import { ProfileTypes } from 'config'

import { usePageParams } from 'hooks/usePageParams'
import {
  CountryFlag,
  Description,
  MatchDate,
  StyledLink,
  Title,
  Tournament,
  Views,
} from './styled'

type Props = {
  profile: MatchInfo,
}

export const MatchDescription = ({ profile }: Props) => {
  const { sportType } = usePageParams()

  if (!profile) return <Description />

  const {
    country_id,
    date,
    live,
    team1,
    team2,
    tournament,
  } = profile

  const localDate = format(parseDate(date), live ? 'HH:mm' : 'd.MM.Y')

  return (
    <Description>
      <Title>
        <StyledLink
          id={team1.id}
          profileType={ProfileTypes.TEAMS}
          sportType={sportType}
        >
          <Name nameObj={team1} />
        </StyledLink>
        &nbsp;—&nbsp;
        <StyledLink
          id={team2.id}
          profileType={ProfileTypes.TEAMS}
          sportType={sportType}
        >
          <Name nameObj={team2} />
        </StyledLink>
        {live ? '\u00a0|\u00a0LIVE STREAM' : ''}
      </Title>
      <Tournament>
        <SportIcon sport={sportType} />
        <CountryFlag
          src={`https://instatscout.com/images/flags/48/${country_id}.png`}
        />
        <StyledLink
          id={tournament.id}
          profileType={ProfileTypes.TOURNAMENTS}
          sportType={sportType}
        >
          <Name nameObj={tournament} />
        </StyledLink>
      </Tournament>
      <Views>
        {
          live
            ? <T9n t='started_streaming_at' />
            : <T9n t='streamed_live_on' />
        }
        <MatchDate>{localDate}</MatchDate>
      </Views>
    </Description>
  )
}
