import type { MatchInfo } from 'requests/getMatchInfo'

import { ProfileTypes } from 'config'

import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { Name } from 'features/Name'
import { useMatchPopupStore } from 'features/MatchPopup'

import { usePageParams } from 'hooks/usePageParams'

import {
  Wrapper,
  Team,
  Score,
  StyledLink,
  ScoreWrapper,
  Logo,
  MatchStatus,
} from './styled'

type Props = {
  profile: MatchInfo,
}

export const MatchProfileCard = ({ profile }: Props) => {
  const { sportType } = usePageParams()
  const { isScoreHidden } = useMatchSwitchesStore()
  const { matchPlaylists } = useMatchPopupStore()

  if (!profile) return <Wrapper />

  const {
    live,
    team1,
    team2,
  } = profile

  return (
    <Wrapper>
      <Team>
        <StyledLink
          id={team1.id}
          profileType={ProfileTypes.TEAMS}
          sportType={sportType}
        >
          <Name nameObj={team1} prefix='abbrev_' />
          <Logo
            sportType={sportType}
            profileType={ProfileTypes.TEAMS}
            id={team1.id}
          />
        </StyledLink>
      </Team>
      <ScoreWrapper>
        <Score>
          {
            isScoreHidden || !team1.score || !team2.score
              ? '-'
              : `${team1.score} - ${team2.score}`
          }
        </Score>
        {live && matchPlaylists.state && (
          <MatchStatus>
            {matchPlaylists.state}
          </MatchStatus>
        )}
      </ScoreWrapper>
      <Team>
        <StyledLink
          id={team2.id}
          profileType={ProfileTypes.TEAMS}
          sportType={sportType}
        >
          <Logo
            sportType={sportType}
            profileType={ProfileTypes.TEAMS}
            id={team2.id}
          />
          <Name nameObj={team2} prefix='abbrev_' />
        </StyledLink>
      </Team>
    </Wrapper>
  )
}
