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

import getUnixTime from 'date-fns/getUnixTime'

import { ProfileTypes, PAGES } from 'config'

import type { Match } from 'features/Matches'
import { SportIcon } from 'features/SportIcon'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { useName } from 'features/Name'
import { T9n } from 'features/T9n'
import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction'

import { readToken } from 'helpers/token'

import { useUserFavoritesStore } from 'features/UserFavorites/store'
import { NoAccessMessage } from '../NoAccessMessage'
import {
  CardWrapperOuter,
  CardWrapper,
  Info,
  LiveSign,
  MatchDate,
  MatchTimeInfo,
  Preview,
  PreviewWrapper,
  Score,
  Team,
  TeamName,
  Teams,
  Time,
  TournamentName,
  TeamLogos,
  TeamLogo,
  BuyMatchBadge,
  CountryFlag,
  SecondaryInfo,
  FavoriteSign,
  NameSignWrapper,
  HoverFrame,
} from '../styled'

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

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

  const currentPreviewURL = previewURL ? `${previewURL}?access_token=${readToken()}` : preview

  return (
    <CardWrapperOuter
      onClick={onClick}
      onKeyPress={onKeyPress}
    >
      <CardWrapper>
        <HoverFrame />
        <PreviewWrapper>
          {
            (currentPreviewURL) && (
              <Preview
                alt={tournamentName}
                title={tournamentName}
                src={currentPreviewURL}
              />
            )
          }
          {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>
            )}
          {access === MatchAccess.CanBuyMatch && <BuyMatchBadge />}
          <MatchTimeInfo>
            <MatchDate isHomePage={isHomePage}>
              {isHomePage ? null : formattedDate}
              <Time>{time}</Time>
            </MatchDate>
            {live && (
              <LiveSign>
                <T9n t='live' />
              </LiveSign>
            )}
          </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>
            <SportIcon sport={sportType} />
            <CountryFlag src={`https://instatscout.com/images/flags/48/${match.countryId}.png`} />
            {tournament && (
              <NameSignWrapper>
                <TournamentName title={tournamentName}>
                  {tournamentName}
                </TournamentName>
                {tournamentInFavorites && <FavoriteSign marginLeft={12} />}
              </NameSignWrapper>
            )}
          </SecondaryInfo>
        </Info>
      </CardWrapper>
    </CardWrapperOuter>
  )
}