import format from 'date-fns/format'

import map from 'lodash/map'

import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'

import { useTournamentLanding } from './hooks'
import { TeamLogoImg } from './TeamLogoImg'

import {
  Wrapper,
  InsportsLogo,
  HeaderWrapper,
  Footer,
  BlockWrapper,
  TournamentInfo,
  DateInfo,
  InsportsImg,
  TournamentMedia,
  TournamentLogo,
  TournamentTitle,
  TournamentButton,
  MainInfoContainer,
  TournamentDescription,
  TeamsLogo,
  SliderContainer,
  SliderWrapper,
  MainLogoImg,
  MainLogoWrapper,
  SliderSwitch,
  SliderSwitchItem,
  SliderImg,
  LogoBackground,
  TournamentInfoContainer,
} from './styled'

const TournamentLanding = () => {
  const {
    buttonColor,
    buttonLexic,
    description,
    gallery,
    logo,
    logoInsports,
    onButtonClick,
    onSliderSwitchClick,
    period,
    redirectToHomePage,
    sliderItemId,
    teams,
    title,
    tournamentInfo,
  } = useTournamentLanding()

  if (!tournamentInfo) return null

  const currentYear = format(new Date(), 'Y')

  return (
    <Wrapper>
      <HeaderWrapper>
        {isMobileDevice && <TournamentLogo src={logo} />}
        <InsportsLogo onClick={redirectToHomePage} />
      </HeaderWrapper>
      <MainInfoContainer>
        <BlockWrapper>
          {
            gallery
              ? (
                <SliderWrapper>
                  <SliderContainer>
                    {map(gallery, (img, itemId) => (
                      <SliderImg
                        isAnimatedImg={itemId === sliderItemId}
                        key={img.id}
                        src={img.url}
                      />
                    ))}
                  </SliderContainer>
                  <SliderSwitch>
                    {map(gallery, (img, itemId) => (
                      <SliderSwitchItem
                        onClick={() => onSliderSwitchClick(itemId)}
                        slideOpacity={itemId === sliderItemId}
                        key={img.id}
                      />
                    ))}
                  </SliderSwitch>
                </SliderWrapper>
              )
              : (
                <MainLogoWrapper>
                  <LogoBackground />
                  <MainLogoImg src={logo} />
                </MainLogoWrapper>
              )
          }
          <TournamentInfoContainer>
            <TournamentInfo>
              <DateInfo t={period} />
              <TournamentTitle t={title} />
              <TournamentDescription t={description} />
              <TournamentButton
                buttonColor={buttonColor}
                onClick={onButtonClick}
              >
                <T9n t={buttonLexic} />
              </TournamentButton>
            </TournamentInfo>
            <TournamentMedia>
              {gallery && <TournamentLogo src={logo} />}
              {teams && (
                <TeamsLogo>
                  {map(teams, (item) => (
                    <TeamLogoImg
                      key={item.id}
                      src={item.logo}
                    />
                  ))}
                </TeamsLogo>
              )}
              {logoInsports && <InsportsImg src='/images/insports-logo.svg' />}
            </TournamentMedia>
          </TournamentInfoContainer>
        </BlockWrapper>
      </MainInfoContainer>
      <Footer>©inSports.tv {currentYear}</Footer>
    </Wrapper>
  )
}

export default TournamentLanding