import format from 'date-fns/format'

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 { useUnauthenticatedMatch } from './hooks'

import {
  Wrapper,
  MainLogo,
  HeaderWrapper,
  Footer,
  BlockWrapper,
  MatchInfo,
  SportImgWrapper,
  DateInfoWrapper,
  DateInfo,
  WatchLive,
  TeamsNameWrapper,
  MainInfoTitle,
  MainInfoButton,
  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 = format(new Date(), 'Y')

  return (
    <Wrapper>
      <HeaderWrapper>
        <MainLogo />
      </HeaderWrapper>
      <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_instat_tv' />
          </MainInfoTitle>
          <SportImgMobileDevice sportType={sportType} />
          <MainInfoText>
            <T9n t='promo_text' />
          </MainInfoText>
          <MainInfoButton onClick={onJoinClick}>
            <T9n t='join_now' />
          </MainInfoButton>
        </MatchInfo>
      </BlockWrapper>
      <Footer>
        <FooterLogo />
        <FooterRights>©InStat TV {currentYear}</FooterRights>
      </Footer>
    </Wrapper>
  )
}