import { Fragment } from 'react'

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

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

import { useAuthStore } from 'features/AuthStore'

import { getCurrentYear } from 'helpers'

import {
  Wrapper,
  TunisiaLogo,
  HeaderWrapper,
  Footer,
  BlockWrapper,
  MatchInfo,
  LigueImgWrapper,
  Season,
  MainInfoTitle,
  MainInfoButton,
  MainInfoContainer,
  MainInfoText,
  FooterRights,
  ClubsLogo,
  InsportsLogo,
  ScGradient,
  LigueImg,
} from './styled'

export const DiwanInsportsTv = () => {
  useLexicsConfig(joinMatchLexics)
  const { login } = useAuthStore()

  const currentYear = getCurrentYear()

  return (
    <Wrapper>
      <HeaderWrapper>
        <InsportsLogo />
        {isMobileDevice && <TunisiaLogo />}
      </HeaderWrapper>
      <MainInfoContainer>
        <BlockWrapper>
          <LigueImgWrapper>
            <ScGradient />
            <LigueImg />
          </LigueImgWrapper>
          <MatchInfo>
            <Season>
              <T9n t='diwan_season' />
            </Season>
            <MainInfoTitle>
              <T9n t='diwan_title' />
            </MainInfoTitle>
            <MainInfoText>
              <T9n t='diwan_desc' />
            </MainInfoText>
            <MainInfoButton onClick={login}>
              <T9n t='diwan_join' />
            </MainInfoButton>
            {!isMobileDevice && (
              <Fragment>
                <TunisiaLogo />
                <ClubsLogo />
              </Fragment>
            )}
          </MatchInfo>
        </BlockWrapper>
      </MainInfoContainer>
      <Footer>
        <FooterRights>©inSports.tv {currentYear}</FooterRights>
      </Footer>
    </Wrapper>
  )
}
