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

import getUnixTime from 'date-fns/getUnixTime'

import {
  ProfileTypes,
  PAGES,
  client,
} from 'config'

import type { Match } from 'helpers'
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 { useHeaderFiltersStore } from 'features/HeaderFilters'
import { Icon } from 'features/Icon'

import type { LiveScore } from 'requests'

import { NoAccessMessage } from '../../NoAccessMessage'
import { getPrepareTimeFormat } from '../../helpers'
import { getPrepareDateFormat } from '../../helpers/getPrepareDateFormat'

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

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

export const CardFrontsideMobile = ({
  isNeedFormatTimeChanged,
  isOwnedMatches,
  match,
  onClick,
  onKeyPress,
  score,
}: Props) => {
  const location = useLocation()
  const {
    access,
    date,
    group,
    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 { isMonthMode } = useHeaderFiltersStore()
  const { color } = tournament
  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}>
      <CardWrapper gradientColor={color || group?.color}>
        <HoverFrame />
        <PreviewWrapper>
          {previewImage && (
            <Preview title={tournamentName} src={previewImage} />
          )}
          {access === MatchAccess.NoCountryAccess ? (
            <NoAccessMessage />
          ) : (
            <TeamLogos>
              <TeamLogo
                id={team1.id}
                logoUrl={team1.media?.logo_url}
                nameAsTitle
                altNameObj={team1}
                sportType={sportType}
                profileType={ProfileTypes.TEAMS}
              />
              <TeamLogo
                id={team2.id}
                logoUrl={team2.media?.logo_url}
                nameAsTitle
                altNameObj={team2}
                sportType={sportType}
                profileType={ProfileTypes.TEAMS}
              />
            </TeamLogos>
          )}
          <MatchTimeInfo isOwnedMatches={isOwnedMatches}>
            <MatchDate
              isHomePage={isHomePage}
              isOwnedMatches={isOwnedMatches}
              isMonthMode={isMonthMode}
            >
              {(isHomePage && !isMonthMode) || isMatchPage ? null : prepareDate}
              {isOwnedMatches && <MobTime>{prepareTime}</MobTime> }
            </MatchDate>
            {live && (
              <LiveSign>
                <T9n t='live' />
              </LiveSign>
            )}
          </MatchTimeInfo>
        </PreviewWrapper>
        <Info>
          <Teams>
            <Team>
              <NameSignWrapper>
                <TeamName nameObj={team1} />
                {team1InFavorites && <FavoriteSign />}
              </NameSignWrapper>
              <Score
                showScore={showScore}
                score={score?.team1.score ?? team1.score}
                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
              />
            </Team>
            <Team>
              <NameSignWrapper>
                <TeamName nameObj={team2} />
                {team2InFavorites && <FavoriteSign />}
              </NameSignWrapper>
              <Score
                showScore={showScore}
                score={score?.team2.score ?? team2.score}
                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
              />
            </Team>
          </Teams>
          <SecondaryInfo>
            {isHomePage || isMatchPage ? <Time>{prepareTime}</Time> : null}
            {access === MatchAccess.CanBuyMatch && (
              <BuyMatchBadge>
                <Icon
                  styles={{
                    display: 'flex',
                    justifyContent: 'center',
                  }}
                  refIcon={client.currencyBadge.sign}
                  size={10}
                  color={client.currencyBadge.secondColor}
                />
              </BuyMatchBadge>
            )}
          </SecondaryInfo>
        </Info>
      </CardWrapper>
    </CardWrapperOuter>
  )
}