import type { MouseEvent } from 'react'

import { Link } from 'react-router-dom'

import type { Match } from 'features/Matches'
import { OutsideClick } from 'features/OutsideClick'

import {
  CardHoverInner,
  CardHoverTitle,
  CardHoverWrapper,
  MoreVideo,
  Row,
  Rows,
} from '../styled'

type CardFinishedHoverProps = {
  match: Match,
  onClose: () => void,
}

const stopProp = (e: MouseEvent<HTMLDivElement>) => {
  e.stopPropagation()
}

export const CardFinishedHover = ({
  match: {
    hasVideo,
    id,
    sportName,
  },
  onClose,
}: CardFinishedHoverProps) => (
  <OutsideClick onClick={onClose}>
    <CardHoverWrapper onClick={onClose}>
      <CardHoverInner>
        <CardHoverTitle t='match_video' />
        <Rows onClick={stopProp}>
          <Row>
            <Link to={`/${sportName}/matches/${id}`}>
              <MoreVideo t='full_game' />
            </Link>
            <MoreVideo t='game_time' />
          </Row>

          <Row>
            <MoreVideo t='highlights' />
            <MoreVideo t='goals' />
            <MoreVideo t='interview' />
          </Row>

          <Row>
            <MoreVideo t='players_video' />
          </Row>
        </Rows>
      </CardHoverInner>
    </CardHoverWrapper>
  </OutsideClick>
)