import { Fragment } from 'react'

import format from 'date-fns/format'

import map from 'lodash/map'

import { isMobileDevice } from 'config'

import { T9n } from 'features/T9n'

import { checkUrlParams } from 'helpers/parseUrlParams/parseUrlParams'

import { useLandings } 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 Landings = () => {
  const {
    buttonColor,
    buttonLexic,
    defaultTournamentName,
    description,
    gallery,
    inActiveLandingData,
    isInactiveLanding,
    isNonExistLanding,
    logo,
    logoInsports,
    nonExistLogoSrc,
    onButtonClick,
    onSliderSwitchClick,
    period,
    redirectToHomePage,
    sliderItemId,
    teams,
    title,
    tournamentInfo,
  } = useLandings()

  const season = checkUrlParams('season') ?? inActiveLandingData()?.season
  const tournamentName = checkUrlParams('tournament') ?? inActiveLandingData()?.tournamentsTitle

  const fallbackSrc = '/images/tournament-fallback.png'

  if ((!tournamentInfo && !isNonExistLanding)
    || (isNonExistLanding && !nonExistLogoSrc)) return null

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

  return (
    <Wrapper>
      <HeaderWrapper>
        {isMobileDevice && <TournamentLogo src={logo} />}
        <InsportsLogo onClick={redirectToHomePage} />
      </HeaderWrapper>
      <MainInfoContainer>
        <BlockWrapper>
          {
            gallery && !isInactiveLanding && !isNonExistLanding
              ? (
                <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 || nonExistLogoSrc}
                    fallbackSrc={fallbackSrc}
                  />
                </MainLogoWrapper>
              )
          }
          <TournamentInfoContainer>
            <TournamentInfo>
              {isInactiveLanding || isNonExistLanding
                ? (
                  <Fragment>
                    <DateInfo>
                      {isInactiveLanding
                        ? (
                          <>
                            <T9n t='inactive_period' />&nbsp;{season}
                          </>
                        )
                        : <T9n t='default_season' />}&nbsp;

                    </DateInfo>
                    <TournamentTitle>
                      <T9n t='inactive_title_1' />&nbsp;
                      {tournamentName || defaultTournamentName}&nbsp;
                      <T9n t='inactive_title_2' />
                    </TournamentTitle>
                    <TournamentDescription>
                      <T9n t='inactive_description_1' />&nbsp;
                      {tournamentName || defaultTournamentName}&nbsp;
                      <T9n t='inactive_description_2' />
                    </TournamentDescription>
                  </Fragment>
                )
                : (
                  <Fragment>
                    <DateInfo>
                      <T9n t={period} />
                    </DateInfo>
                    <TournamentTitle>
                      <T9n t={title} />
                    </TournamentTitle>
                    <TournamentDescription>
                      <T9n t={description} />
                    </TournamentDescription>
                  </Fragment>
                )}
              <TournamentButton
                buttonColor={buttonColor}
                onClick={onButtonClick}
              >
                <T9n t={isInactiveLanding || isNonExistLanding
                  ? 'inactive_button'
                  : buttonLexic}
                />
              </TournamentButton>
            </TournamentInfo>
            {(teams || ((logo || logoInsports) && !isInactiveLanding)) && (
              <TournamentMedia>
                {gallery && !isInactiveLanding && <TournamentLogo src={logo} />}
                {teams && (
                  <TeamsLogo>
                    {map(teams, (item) => (
                      <TeamLogoImg
                        key={item.id}
                        src={item.logo}
                      />
                    ))}
                  </TeamsLogo>
                )}
                {(logoInsports && !isInactiveLanding) && <InsportsImg src='/images/insports-logo.svg' />}
              </TournamentMedia>
            )}
          </TournamentInfoContainer>
        </BlockWrapper>
      </MainInfoContainer>
      <Footer>©inSports.tv {currentYear}</Footer>
    </Wrapper>
  )
}

export default Landings