import { ProfileTypes } from 'config'

import { T9n } from 'features/T9n'
import { Icon } from 'features/Icon'
import { useHeaderFiltersStore } from 'features/HeaderFilters'

import { SportIcon } from 'components/SportIcon/SportIcon'

import {
  CardWrapperOuter,
  CardWrapper,
  CountMatches,
  FavoriteSign,
  FirstInfo,
  Info,
  LiveSign,
  MatchTimeInfo,
  TournamentLogo,
  PreviewWrapper,
  TournamentName,
  CountryFlag,
  SecondaryInfo,
  HoverFrame,
} from './styled'

import { TournamentProps } from '../..'

export const CollapseTournament = ({
  tournament,
  tournamentMatches,
}: TournamentProps) => {
  const {
    setIsShowTournament,
    setSelectedLeague,
    setSelectTournament,
  } = useHeaderFiltersStore()
  const {
    countryId,
    isFavorite,
    live,
    sportType,
  } = tournament

  const handleClick = () => {
    setIsShowTournament(false)
    setSelectedLeague([tournament.id])
    setSelectTournament(tournament)
  }

  return (
    <CardWrapperOuter onClick={() => handleClick()}>
      <CardWrapper>
        <HoverFrame />
        <PreviewWrapper>
          <TournamentLogo
            id={tournament.id}
            isTournamentSuper={tournament.is_super_tournament}
            nameAsTitle
            altNameObj={tournament}
            sportType={sportType}
            profileType={ProfileTypes.TOURNAMENTS}
          />
          <MatchTimeInfo>
            {live && (
              <LiveSign>
                <T9n t='live' />
              </LiveSign>
            )}
          </MatchTimeInfo>
        </PreviewWrapper>
        <Info>
          <FirstInfo>
            <SportIcon
              size='0.65rem'
              fill='#ffffff'
              sport={sportType}
            />
            <CountryFlag
              src={`https://instatscout.com/images/flags/48/${countryId}.png`}
            />
            {isFavorite && (
              <FavoriteSign color='rgba(255, 255, 255, 0.5)'>
                <Icon styles={{ display: 'flex' }} refIcon='Star' />
              </FavoriteSign>
            )}
          </FirstInfo>

          <SecondaryInfo>
            <TournamentName nameObj={tournament} />
          </SecondaryInfo>
          <CountMatches>
            {tournamentMatches.length}
              &nbsp;
            {
              tournamentMatches.length > 1
                ? <T9n t='broadcasts' />
                : <T9n t='broadcast' />
            }
          </CountMatches>
        </Info>
      </CardWrapper>
    </CardWrapperOuter>
  )
}
