spa_instat_tv/src/features/MatchCard/CardFrontside/MatchCardMobile/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 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 { NoAccessMessage } from '../../NoAccessMessage'
import {
  CardWrapperOuter,
  CardWrapper,
  Info,
  LiveSign,
  MatchDate,
  MatchTimeInfo,
  Preview,
  PreviewWrapper,
  Score,
  Team,
  TeamName,
  Teams,
  Time,
  TeamLogos,
  TeamLogo,
  BuyMatchBadge,
  SecondaryInfo,
  FavoriteSign,
  NameSignWrapper,
  HoverFrame,
  ScDollar,
} from './styled'
import { useCardPreview } from '../hooks'

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

export const CardFrontsideMobile = ({
  match,
  onClick,
  onKeyPress,
}: Props) => {
  const location = useLocation()
  const {
    access,
    date,
    formattedDate,
    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,
  })

  return (
    <CardWrapperOuter onClick={onClick} onKeyPress={onKeyPress}>
      <CardWrapper>
        <HoverFrame />
        <PreviewWrapper>
          {previewImage && (
            <Preview title={tournamentName} src={previewImage} />
          )}
          {access === MatchAccess.NoCountryAccess ? (
            <NoAccessMessage />
          ) : (
            <TeamLogos>
              <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>
          )}
          <MatchTimeInfo>
            <MatchDate isHomePage={isHomePage}>
              {isHomePage || isMatchPage ? null : formattedDate}
              {live && (
                <LiveSign>
                  <T9n t='live' />
                </LiveSign>
              )}
            </MatchDate>
          </MatchTimeInfo>
        </PreviewWrapper>
        <Info>
          <Teams>
            <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>
          <SecondaryInfo>
            <Time>{time}</Time>
            {access === MatchAccess.CanBuyMatch && (
              <BuyMatchBadge>
                <ScDollar refIcon='Dollar' />
              </BuyMatchBadge>
            )}
          </SecondaryInfo>
        </Info>
      </CardWrapper>
    </CardWrapperOuter>
  )
}