import { useEffect } from 'react'

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

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

import { getCurrentYear } from 'helpers'

import { useUnauthenticatedMatch } from './hooks'

import {
  Wrapper,
  MainLogo,
  HeaderWrapper,
  Footer,
  Container,
  ColoredText,
  BlockWrapper,
  BoldText,
  MatchInfo,
  SportImgWrapper,
  LogoRFEF,
  PriceDesc,
  PriceInfo,
  PriceWrapper,
  NormalText,
  TitleDescWrapper,
  Button,
  SportImgMobileDevice,
  FooterLogo,
  FooterRights,
  MainTitle,
  Price,
} from './styled'

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

  const {
    onJoinClick,
  } = useUnauthenticatedMatch()

  const currentYear = getCurrentYear()

  const { changeLang } = useLexicsStore()

  useEffect(() => {
    changeLang('es')
  }, [changeLang])

  return (
    <Wrapper>
      <HeaderWrapper>
        <MainLogo />
      </HeaderWrapper>
      <BlockWrapper>
        <SportImgWrapper />
        <MatchInfo>
          <Container>
            <LogoRFEF />
            <MainTitle>
              <T9n t='rfef_title' />
            </MainTitle>
          </Container>
          <PriceInfo>
            <PriceWrapper>
              <Price t='rfef_price1' />
              <PriceDesc t='rfef_price_desc1' />
            </PriceWrapper>
            <PriceWrapper>
              <Price t='rfef_price2' />
              <PriceDesc t='rfef_price_desc2' />
            </PriceWrapper>
          </PriceInfo>
          <SportImgMobileDevice />
          <TitleDescWrapper>
            <NormalText t='rfef_desc1' />
            <ColoredText t='rfef_desc2' />
            <NormalText t='rfef_desc3' />
            <BoldText t='rfef_desc4' />
            <NormalText t='rfef_desc5' />
          </TitleDescWrapper>
          <Button onClick={onJoinClick}>
            <T9n t='rfef_button' />
          </Button>
        </MatchInfo>
      </BlockWrapper>
      <Footer>
        <FooterLogo />
        <FooterRights>©InStat TV {currentYear}</FooterRights>
      </Footer>
    </Wrapper>
  )
}
