import { ProfileTypes } from 'config'

import type { Event, Team } from 'requests'

import { usePageParams } from 'hooks/usePageParams'

import { Name } from 'features/Name'
import { T9n } from 'features/T9n'

import {
  Avatar,
  Button,
  EventInfo,
  EventDesc,
  Title,
  SubTitle,
  EventTime,
  EventLike,
} from '../TabEvents/styled'

type Props = {
  active?: boolean,
  disabled?: boolean,
  event: Event,
  isHomeTeam: boolean,
  onClick: () => void,
  team?: Team,
}

export const EventButton = ({
  active,
  disabled,
  event,
  isHomeTeam,
  onClick,
  team,
}: Props) => {
  const { sportType } = usePageParams()
  const {
    c: clearTime,
    l: lexica,
    p: playerId,
    pl: playerName,
    sc1: score1,
    sc2: score2,
    t: teamId,
  } = event

  const avatarId = playerId || teamId
  const profileType = playerId
    ? ProfileTypes.PLAYERS
    : ProfileTypes.TEAMS
  const nameObj = playerName || team

  return (
    <Button
      onClick={onClick}
      active={active}
      disabled={disabled}
      isHomeTeam={isHomeTeam}
      like={event.like}
    >
      {avatarId && (
        <Avatar
          id={avatarId}
          isHomeTeam={isHomeTeam}
          isPlayer={Boolean(playerId)}
          profileType={profileType}
          sportType={sportType}
        />
      )}
      <EventInfo>
        {event.like && (
          <EventLike src='/images/like-active-icon.svg' />
        )}
        <EventTime>
          {clearTime}
        </EventTime>
        <EventDesc>
          <Title>
            <T9n t={lexica} />
            {(score1 || score2) && ` (${score1}-${score2})`}
          </Title>
          <SubTitle>
            {(playerId || teamId) && nameObj && <Name nameObj={nameObj} />}
          </SubTitle>
        </EventDesc>
      </EventInfo>
    </Button>
  )
}
