import { T9n } from 'features/T9n'
import { ProfileTypes } from 'config'

import { Wrapper } from 'features/PreferencesPopup/styled'

import {
  ScItem,
  ScBody,
  ScList,
  ScHeaderTitle,
  ScTournamentList,
  ScModalContainer,
  StyledLink,
} from './styled'

import { useTournamentPopupStore } from './store'
import { Loader } from '../Loader'
import { LoaderWrapper } from '../StreamPlayer/styled'

export const TournamentsPopup = () => {
  const {
    close,
    isFetching,
    isOpen,
    teams,
    tournaments,
  } = useTournamentPopupStore()

  return (
    <ScModalContainer isOpen={isOpen} close={close} withCloseButton>
      <Wrapper>
        <ScBody>{
          isFetching ? (
            <LoaderWrapper buffering={false}>
              <Loader color='#515151' />
            </LoaderWrapper>
          ) : (
            <>
              <ScTournamentList>
                <ScHeaderTitle>
                  <T9n t='my_tournaments' />
                </ScHeaderTitle>
                <ScList>
                  {tournaments.map((tournament) => (
                    <StyledLink
                      id={tournament.id}
                      profileType={ProfileTypes.TOURNAMENTS}
                      sportType={1}
                      onClick={close}
                      key={tournament.id}
                    >
                      <ScItem isIcon={false} tournament={tournament} />
                    </StyledLink>
                  ))}
                </ScList>
              </ScTournamentList>
              <ScTournamentList>
                <ScHeaderTitle>
                  <T9n t='my_teams' />
                </ScHeaderTitle>
                <ScList>
                  {teams.map((team) => (
                    <StyledLink
                      id={team.id}
                      profileType={ProfileTypes.TEAMS}
                      sportType={1}
                      onClick={close}
                      key={team.id}
                    >
                      <ScItem isIcon={false} tournament={team} prefix='short_name_' />
                    </StyledLink>
                  ))}
                </ScList>
              </ScTournamentList>
            </>
          )
        }
        </ScBody>
      </Wrapper>
    </ScModalContainer>
  )
}