import type { MouseEvent } from 'react'
import React from 'react'

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

import { OutsideClick } from 'features/OutsideClick'

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

type CardFinishedHoverProps = {
  id: number,
  onClose: () => void,
  sportName: string,
}

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

export const CardFinishedHover = ({
  id,
  onClose,
  sportName,
}: 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>
)