import { Fragment, useState } from 'react'

import { isLffClient } from 'config/clients'
import { URL_AWS } from 'config'

import { SportIcon } from 'components/SportIcon/SportIcon'
import { T9n } from 'features/T9n'
import { Icon } from 'features/Icon'
import type { Match } from 'features/Matches'
import { MatchCard } from 'features/MatchCard'
import {
  CountryFlag,
  FavoriteSign,
  LiveSign,
} from 'features/MatchCard/CardFrontside/MatchCardMobile/styled'

import {
  CardWrapperOuter,
  CardWrapper,
  CountMatches,
  TournamentName,
  ScFirstInfo,
  ScMatchesWrapper,
  ScSecondInfo,
} from './styled'

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

export const TournamentMobile = ({
  tournament,
  tournamentMatches,
}: TournamentProps) => {
  const [open, setOpen] = useState(false)
  const {
    countryId,
    isFavorite,
    live,
    sportType,
  } = tournament

  const currentColor = open ? '#ffffff' : 'rgba(255, 255, 255, 0.5)'

  return (
    <CardWrapperOuter>
      <CardWrapper
        onClick={() => setOpen(!open)}
        open={open}
      >
        <ScFirstInfo>
          {!isLffClient && (
            <Fragment>
              <SportIcon
                size={10}
                fill={open ? '#ffffff' : ''}
                sport={sportType}
              />
              <CountryFlag
                src={`${URL_AWS}/media/flags/${countryId}.png`}
              />
            </Fragment>
          )}
          <TournamentName nameObj={tournament} />
          {isFavorite && (
            <FavoriteSign marginLeft={12} color={currentColor}>
              <Icon refIcon='Star' />
            </FavoriteSign>
          )}
        </ScFirstInfo>
        <ScSecondInfo>
          {live && (
            <LiveSign color='#CC0000'>
              <T9n t='live' />
            </LiveSign>
          )}
          <CountMatches color={currentColor}>{tournamentMatches.length}</CountMatches>
          <Icon refIcon='Arrow' direction={open ? 180 : 0} color={currentColor} />
        </ScSecondInfo>
      </CardWrapper>
      <ScMatchesWrapper>
        {open
          && tournamentMatches?.map((match: Match) => (
            <MatchCard key={match.id} match={match} />
          ))}
      </ScMatchesWrapper>
    </CardWrapperOuter>
  )
}
