import React, { Fragment } from 'react'

import isEmpty from 'lodash/isEmpty'

import { getSportColor } from 'helpers/getSportColor'

import { SportName } from 'features/Common/SportName'
import { useScoreStore } from 'features/ToggleScore'

import { useSportNameParam } from 'hooks/useSportNameParam'
import { useMatchPage } from '../hooks'

import {
  Wrapper,
  Teams,
  Score,
  Tournament,
  Dash,
} from './styled'

export const MatchProfileCard = () => {
  const {
    matchProfile,
    matchProfileNames: {
      team1Name,
      team2Name,
      tournament,
    },
  } = useMatchPage()

  const { sportName, sportType } = useSportNameParam()
  const { isHidden } = useScoreStore()

  const { team1, team2 } = matchProfile || {}

  const color = getSportColor(sportType)

  return (
    <Wrapper>
      {!isEmpty(matchProfile)
      && (
        <Fragment>
          <Teams>
            {team1Name} <Dash /> {team2Name}
          </Teams>
          {!isHidden && (
            <Score>
              {team1?.score} : {team2?.score}
            </Score>
          )}
          <Tournament>
            <SportName
              color={color}
              t={sportName}
            />{tournament}
          </Tournament>
        </Fragment>
      )}
    </Wrapper>
  )
}