spa_instat_tv/src/features/MatchCard/CardFrontside/index.tsx

import type { KeyboardEvent } from 'react'
import { useLocation, useRouteMatch } from 'react-router'

import getUnixTime from 'date-fns/getUnixTime'

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

import { getCardColor } from 'helpers/getCardColor'
import type { Match } from 'features/Matches'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { useName } from 'features/Name'
import { T9n } from 'features/T9n'
import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'
import { useUserFavoritesStore } from 'features/UserFavorites/store'
import { TournamentSubtitle } from 'features/TournamentSubtitle'

import { NoAccessMessage } from '../NoAccessMessage'
import {
  CardWrapperOuter,
  CardWrapper,
  Info,
  LiveSign,
  MatchDate,
  MatchTimeInfo,
  Preview,
  PreviewWrapper,
  Score,
  Team,
  TeamName,
  Teams,
  Time,
  TeamLogos,
  TeamLogo,
  BuyMatchBadge,
  FavoriteSign,
  NameSignWrapper,
  HoverFrame,
} from '../styled'
import { useCardPreview } from './hooks'
import { getPrepareTimeFormat } from '../helpers'
import { getPrepareDateFormat } from '../helpers/getPrepareDateFormat'

type Props = {
  isNeedFormatTimeChanged: boolean,
  match: Match,
  onClick: () => void,
  onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
}

export const CardFrontside = ({
  isNeedFormatTimeChanged,
  match,
  onClick,
  onKeyPress,
}: Props) => {
  const location = useLocation()
  const {
    access,
    countryId,
    date,
    live,
    preview,
    previewURL,
    sportType,
    team1,
    team2,
    time,
    tournament,
  } = match
  const isHomePage = useRouteMatch(PAGES.home)?.isExact
  const isMatchPage = location.pathname.includes(PAGES.match)
  const tournamentName = useName(tournament)
  const { isInFavorites } = useUserFavoritesStore()
  const { isScoreHidden } = useMatchSwitchesStore()
  const isInFuture = getUnixTime(date) > getUnixTime(new Date())
  const showScore = !(
    isInFuture
    || isScoreHidden
  ) || (live && !isScoreHidden)
  const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id)
  const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id)

  const { previewImage } = useCardPreview({
    preview,
    previewURL,
  })

  const prepareTime = getPrepareTimeFormat({
    date,
    isNeedFormatTimeChanged,
    time,
  })

  const prepareDate = getPrepareDateFormat({
    date,
    isNeedFormatTimeChanged,
  })

  return (
    <CardWrapperOuter
      onClick={onClick}
      onKeyPress={onKeyPress}
      isMatchPage={isMatchPage}
    >
      <CardWrapper isMatchPage={isMatchPage}>
        <HoverFrame />
        <PreviewWrapper isGradientPreview={isLffClient} color={getCardColor(tournament.id)}>
          {!isLffClient && previewImage && (
            <Preview
              title={tournamentName}
              src={previewImage}
            />
          )}
          {access === MatchAccess.NoCountryAccess
            ? <NoAccessMessage />
            : (
              <TeamLogos isMatchPage={isMatchPage}>
                <TeamLogo
                  id={team1.id}
                  nameAsTitle
                  altNameObj={team1}
                  sportType={sportType}
                  profileType={ProfileTypes.TEAMS}
                />
                <TeamLogo
                  id={team2.id}
                  nameAsTitle
                  altNameObj={team2}
                  sportType={sportType}
                  profileType={ProfileTypes.TEAMS}
                />
              </TeamLogos>
            )}
          {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
          <MatchTimeInfo>
            <MatchDate isHomePage={isHomePage}>
              {isHomePage || isMatchPage ? null : prepareDate}
              <Time>{prepareTime}</Time>
            </MatchDate>
            {live && (
              <LiveSign>
                <T9n t='live' />
              </LiveSign>
            )}
          </MatchTimeInfo>
        </PreviewWrapper>
        <Info isMatchPage={isMatchPage}>
          <Teams isMatchPage={isMatchPage}>
            <Team>
              <NameSignWrapper>
                <TeamName nameObj={team1} />
                {team1InFavorites && <FavoriteSign />}
              </NameSignWrapper>
              {showScore && <Score>{team1.score}</Score>}
            </Team>
            <Team>
              <NameSignWrapper>
                <TeamName nameObj={team2} />
                {team2InFavorites && <FavoriteSign />}
              </NameSignWrapper>
              {showScore && <Score>{team2.score}</Score>}
            </Team>
          </Teams>
          {!isMatchPage && (
            <TournamentSubtitle
              sportType={sportType}
              countryId={countryId}
              tournament={tournament}
            />
          )}
        </Info>
      </CardWrapper>
    </CardWrapperOuter>
  )
}