import { joinMatchLexics } from 'config/lexics/joinMatch'

import { usePageParams } from 'hooks/usePageParams'

import { T9n } from 'features/T9n'
import { Name } from 'features/Name'
import { useLexicsConfig } from 'features/LexicsStore'

import { getCurrentYear } from 'helpers'

import { useUnauthenticatedMatch } from './hooks'

import {
  Wrapper,
  MainLogo,
  HeaderWrapper,
  Footer,
  BlockWrapper,
  MatchInfo,
  SportImgWrapper,
  DateInfoWrapper,
  DateInfo,
  WatchLive,
  TeamsNameWrapper,
  MainInfoTitle,
  MainInfoButton,
  MainInfoContainer,
  MainInfoText,
  EmptySpan,
  WatchLiveCircle,
  WatchLiveText,
  SportImgMobileDevice,
  FooterLogo,
  FooterRights,
} from './styled'

export const JoinMatchPage = () => {
  useLexicsConfig(joinMatchLexics)

  const { sportType } = usePageParams()
  const {
    live,
    matchDate,
    matchInfo,
    onJoinClick,
  } = useUnauthenticatedMatch()

  const currentYear = getCurrentYear()

  return (
    <Wrapper>
      <HeaderWrapper>
        <MainLogo />
      </HeaderWrapper>
      <MainInfoContainer>
        <BlockWrapper>
          <SportImgWrapper sportType={sportType} />
          <MatchInfo>
            {matchInfo?.team1
              && (
                <DateInfoWrapper>
                  <DateInfo>{matchDate}</DateInfo>
                  {live && (
                    <WatchLive>
                      <WatchLiveCircle />
                      <WatchLiveText>
                        <T9n t='watch_live' />
                      </WatchLiveText>
                    </WatchLive>
                  )}
                </DateInfoWrapper>
              )}
            <TeamsNameWrapper>
              {matchInfo?.team1 ? (
                <>
                  <Name nameObj={matchInfo?.team1 || {}} />
                  <EmptySpan> — </EmptySpan>
                  <Name nameObj={matchInfo?.team2 || {}} />
                </>

              ) : (<Name nameObj={matchInfo?.tournament || {}} />)}

            </TeamsNameWrapper>
            <MainInfoTitle>
              <T9n t='join_insports_tv' />
            </MainInfoTitle>
            <SportImgMobileDevice sportType={sportType} />
            <MainInfoText>
              <T9n t='promo_text' />
            </MainInfoText>
            <MainInfoButton onClick={onJoinClick}>
              <T9n t='join_now' />
            </MainInfoButton>
          </MatchInfo>
        </BlockWrapper>
      </MainInfoContainer>
      <Footer>
        <FooterLogo />
        <FooterRights>©inSports.tv {currentYear}</FooterRights>
      </Footer>
    </Wrapper>
  )
}
