import { ProfileTypes, URL_AWS } from 'config'

import { T9n } from 'features/T9n'
import { Icon } from 'features/Icon'
import { Name } from 'features/Name'
import { useHeaderFiltersStore } from 'features/HeaderFilters'
import { CountryWrapper, SportWrapper } from 'features/TournamentSubtitle/styled'

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

import {
  CardWrapperOuter,
  CardWrapper,
  CountMatches,
  FavoriteSign,
  FirstInfo,
  Info,
  LiveSign,
  MatchTimeInfo,
  TournamentLogo,
  PreviewWrapper,
  TournamentName,
  CountryFlag,
  SecondaryInfo,
  HoverFrame,
  Tooltip,
} 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)
  }

  const { countryInfo, sportInfo } = tournamentMatches[0]

  return (
    <CardWrapperOuter onClick={() => handleClick()}>
      <CardWrapper>
        <HoverFrame />
        <PreviewWrapper>
          <TournamentLogo
            id={tournament.id}
            logoUrl={tournament.media?.logo_url}
            nameAsTitle
            altNameObj={tournament}
            sportType={sportType}
            profileType={
              tournament.is_super_tournament
                ? ProfileTypes.SUPERTOURNAMENTS
                : ProfileTypes.TOURNAMENTS
            }
          />
          <MatchTimeInfo>
            {live && (
              <LiveSign>
                <T9n t='live' />
              </LiveSign>
            )}
          </MatchTimeInfo>
        </PreviewWrapper>
        <Info>
          <FirstInfo>
            <SportWrapper>
              <SportIcon
                size='0.65rem'
                fill='#ffffff'
                sport={sportType}
              />
              {sportInfo && (
                <Tooltip>
                  <T9n t={sportInfo.lexic} />
                </Tooltip>
              )}
            </SportWrapper>
            <CountryWrapper>
              <CountryFlag
                src={`${URL_AWS}/media/flags/${countryId}.png`}
              />
              {countryInfo && (
                <Tooltip>
                  <Name nameObj={countryInfo} />
                </Tooltip>
              )}
            </CountryWrapper>
            {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>
  )
}
