import React from 'react'

import styled from 'styled-components/macro'

import type { Match } from 'features/HeaderFilters'
import { getSportColor } from 'helpers'
import { SportName } from 'features/Common'
import { T9n } from 'features/T9n'

import { useCard } from '../hooks'
import { CardFinishedHover } from '../CardFinishedHover'
import {
  CardWrapper,
  Info,
  MatchStatus as CommonMatchStatus,
  Preview,
  PreviewWrapper,
  Score,
  Team,
  TeamName,
  Teams,
  TournamentName,
} from '../styled'

const MatchStatus = styled(CommonMatchStatus)`
  color: #313131;
  background-color: #EACB6F;
`

type CardFinishedProps = {
  match: Match,
}

export const CardFinished = ({
  match: {
    date,
    preview,
    sportName,
    sportType,
    team1Name,
    team1Score,
    team2Name,
    team2Score,
    tournamentName,
  },
}: CardFinishedProps) => {
  const {
    close,
    isOpen,
    onKeyPress,
    open,
    showScore,
  } = useCard()

  if (isOpen) return <CardFinishedHover onClose={close} />

  return (
    <CardWrapper
      onClick={open}
      onKeyPress={onKeyPress}
    >
      <MatchStatus><T9n t='game_finished' /></MatchStatus>
      <PreviewWrapper>
        <Preview
          alt={tournamentName}
          title={tournamentName}
          src={preview}
        />
      </PreviewWrapper>
      <Info>
        <SportName t={sportName} color={getSportColor(sportType)} />
        <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
        <Teams>
          <Team>
            <TeamName title={team1Name}>{team1Name}</TeamName>
            {showScore && <Score>{team1Score}</Score>}
          </Team>
          <Team>
            <TeamName title={team2Name}>{team2Name}</TeamName>
            {showScore && <Score>{team2Score}</Score>}
          </Team>
        </Teams>
      </Info>
    </CardWrapper>
  )
}