ChallengeView.tsx

import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UserChallengeState } from 'enum/userChallenge.enum'
import { UserChallenge } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import ChallengeCard from './ChallengeCard'
import './challengeView.scss'

const ChallengeView: React.FC = () => {
  const { t } = useI18n()
  const { userChallengeList } = useSelector(
    (state: AppStore) => state.ecolyo.challenge
  )

  const marginPx = 16
  const cardWidth =
    window.outerWidth < 500 ? window.outerWidth - marginPx * 6 : 285
  const cardHeight = window.outerHeight * 0.6
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [touchStart, setTouchStart] = useState<number>()
  const [touchEnd, setTouchEnd] = useState<number>()
  const [index, setIndex] = useState<number>(0)
  const [lastChallengeIndex, setLastChallengeIndex] = useState<number>(0)
  const [isLastDuelDone, setIsLastDuelDone] = useState<boolean>(false)
  const [containerTranslation, setContainerTranslation] =
    useState<number>(marginPx)
  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  const resetValues = () => {
    // Method used to cancel a swipe on a simple click
    setTouchEnd(0)
    setTouchStart(0)
  }

  const moveSliderRight = useCallback(() => {
    if (
      index < userChallengeList.length - 1 ||
      (isLastDuelDone && index < userChallengeList.length)
    ) {
      if (index === 0)
        setContainerTranslation(
          (prev: number) => prev - cardWidth - marginPx * 1.2
        )
      else if (index >= 1)
        setContainerTranslation((prev: number) => prev - cardWidth - marginPx)
      else setContainerTranslation((prev: number) => prev - cardWidth)
      setIndex(prev => prev + 1)
    }
  }, [cardWidth, index, userChallengeList.length])

  const moveSliderLeft = useCallback(() => {
    if (index > 0) {
      if (index >= 1)
        setContainerTranslation((prev: number) => prev + cardWidth + marginPx)
      else setContainerTranslation((prev: number) => prev + cardWidth)
      setIndex(prev => prev - 1)
    }
    if (index <= 1) {
      setContainerTranslation(marginPx)
    }
  }, [cardWidth, index])

  const moveToSlide = useCallback(
    (slideIndex: number) => {
      setContainerTranslation(-slideIndex * (cardWidth + marginPx) + marginPx)
      setIndex(slideIndex)
    },
    [cardWidth]
  )

  const handleClickOrTouchEnd = () => {
    // if the swipe is too small and can be taken for a touch
    if (touchStart && touchEnd) {
      if (touchStart - touchEnd < 5 && -5 < touchStart - touchEnd) return
      // Change the following value in order to change the swipe sensibility
      if (touchStart - touchEnd > 75) {
        // If swipe left move slider right and add positive translation
        moveSliderRight()
      }
      if (touchStart - touchEnd < -75) {
        // If swipe right move slider left and add negative translation
        moveSliderLeft()
      }
    }
    resetValues()
  }

  useEffect(() => {
    userChallengeList.forEach((challenge: UserChallenge, i: number) => {
      if (
        challenge.state === UserChallengeState.UNLOCKED ||
        challenge.state === UserChallengeState.ONGOING ||
        challenge.state === UserChallengeState.DUEL
      ) {
        setLastChallengeIndex(i)
        if (lastChallengeIndex === 0) return
        else if (lastChallengeIndex === 1) {
          setContainerTranslation(0 - cardWidth * lastChallengeIndex)
        } else {
          setContainerTranslation(
            0 - cardWidth * lastChallengeIndex - marginPx * 1.2
          )
        }
        if (isLastDuelDone) {
          setLastChallengeIndex(i + 1)
        }
        setIndex(i)
      }
    })
  }, [userChallengeList, lastChallengeIndex, cardWidth, isLastDuelDone])

  useEffect(() => {
    if (
      userChallengeList[userChallengeList.length - 1].state ==
      UserChallengeState.DONE
    ) {
      setIsLastDuelDone(true)
    }
  }, [userChallengeList])

  return (
    <>
      <CozyBar titleKey={'common.title_challenge'} />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'common.title_challenge'}
      />
      <Content height={headerHeight}>
        <div
          className="challengeSlider"
          onClick={resetValues}
          onTouchStart={event => setTouchStart(event.targetTouches[0].clientX)}
          onTouchMove={event => setTouchEnd(event.targetTouches[0].clientX)}
          onTouchEnd={handleClickOrTouchEnd}
          onMouseDown={event => setTouchStart(event.clientX)}
          onMouseMove={event => setTouchEnd(event.clientX)}
          onMouseUp={handleClickOrTouchEnd}
        >
          <div
            className="challenge-container"
            style={{
              transform: `translateX(${containerTranslation}px)`,
            }}
          >
            {userChallengeList.map((userChallenge, i) => (
              <ChallengeCard
                key={userChallenge.id}
                userChallenge={userChallenge}
                indexSlider={index}
                index={i}
                cardWidth={cardWidth}
                cardHeight={cardHeight}
                moveToSlide={moveToSlide}
              />
            ))}

            {isLastDuelDone && (
              <ChallengeCard
                indexSlider={index}
                index={5}
                cardWidth={cardWidth}
                cardHeight={cardHeight}
                isChallengeCardLast={true}
                moveToSlide={moveToSlide}
              />
            )}
          </div>
        </div>
        <div className="sliderButtons">
          <StyledIconButton
            onClick={moveSliderLeft}
            icon={LeftArrowIcon}
            sized={16}
            aria-label={t('challenge.accessibility.button_slider_previous')}
          />
          <StyledIconButton
            onClick={moveSliderRight}
            icon={RightArrowIcon}
            sized={16}
            aria-label={t('challenge.accessibility.button_slider_next')}
          />
        </div>
      </Content>
    </>
  )
}

export default ChallengeView