ChallengeView.tsx

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

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

  const marginPx = 16
  const cardWitdh =
    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 - cardWitdh - marginPx * 1.2
        )
      else if (index >= 1)
        setcontainerTranslation((prev: number) => prev - cardWitdh - marginPx)
      else setcontainerTranslation((prev: number) => prev - cardWitdh)
      setindex(prev => prev + 1)
    }
  }, [cardWitdh, index, userChallengeList.length])

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

  const moveToSlide = useCallback(
    (slideIndex: number) => {
      setcontainerTranslation(-slideIndex * (cardWitdh + marginPx) + marginPx)
      setindex(slideIndex)
    },
    [cardWitdh]
  )

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleClickOrTouchStart = (e: any) => {
    if (e.nativeEvent instanceof TouchEvent)
      setTouchStart(e.targetTouches[0].clientX)
    if (e.nativeEvent instanceof MouseEvent) setTouchStart(e.clientX)
  }

  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 sensibilyy
      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()
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleClickOrTouchMove = (e: any) => {
    if (e.nativeEvent instanceof TouchEvent)
      setTouchEnd(e.targetTouches[0].clientX)
    if (e.nativeEvent instanceof MouseEvent) setTouchEnd(e.clientX)
  }

  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 - cardWitdh * lastChallengeIndex)
        } else {
          setcontainerTranslation(
            0 - cardWitdh * lastChallengeIndex - marginPx * 1.2
          )
        }
        if (isLastDuelDone) {
          setlastChallengeIndex(i + 1)
        }
        setindex(i)
      }
    })
  }, [userChallengeList, lastChallengeIndex, cardWitdh, 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'}
      ></Header>
      <Content height={headerHeight}>
        <div
          className="challengeSlider"
          onClick={resetValues}
          onTouchStart={handleClickOrTouchStart}
          onTouchMove={handleClickOrTouchMove}
          onTouchEnd={handleClickOrTouchEnd}
          onMouseDown={handleClickOrTouchStart}
          onMouseMove={handleClickOrTouchMove}
          onMouseUp={handleClickOrTouchEnd}
        >
          <div
            className="challenge-container"
            style={{
              transform: `translateX(${containerTranslation}px)`,
            }}
          >
            {userChallengeList.map((userChallenge, i) => (
              <ChallengeCard
                key={i}
                userChallenge={userChallenge}
                indexSlider={index}
                index={i}
                cardWidth={cardWitdh}
                cardHeight={cardHeight}
                isChallengeCardLast={false}
                moveToSlide={moveToSlide}
              />
            ))}

            {isLastDuelDone && (
              <ChallengeCard
                indexSlider={index}
                index={5}
                cardWidth={cardWitdh}
                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