import React from 'react'

import type { Match } from 'features/Matches'
import { SportName } from 'features/Common'

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

type CardFinishedProps = {
  match: Match,
}

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

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

  return (
    <CardWrapper
      onClick={open}
      onKeyPress={onKeyPress}
    >
      <MatchDate>
        {date}
        <Time>
          {time}
        </Time>
      </MatchDate>
      <PreviewWrapper>
        <Preview
          alt={tournamentName}
          title={tournamentName}
          src={preview}
        />
      </PreviewWrapper>
      <Info>
        <SportName sport={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>
  )
}