FinishedChallengeDetailsViewContainer.tsx

import React, { useState, useEffect, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import {
  UserChallenge,
  TypeChallenge,
  BadgeState,
} from 'services/dataChallengeContracts'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StarIcon from 'assets/png/challenge/star.png'
import EcogestureModal from 'components/ContentComponents/EcogestureModal/EcogestureModal'
import EcogestureCard from 'components/ContentComponents/EcogestureCard/EcogestureCard'
import { Client, withClient } from 'cozy-client'
import { Redirect } from 'react-router-dom'
import { formatNumberValues } from 'utils/utils'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { ScreenType } from 'enum/screen.enum'

interface FinishedChallengeDetailsViewProps {
  location: any
  props: object
  client: Client
  t: Function
}

const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsViewProps> = (
  props: FinishedChallengeDetailsViewProps
) => {
  const t = props.t
  const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
  const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
  const [challenge, setChallenge] = useState<UserChallenge | null>(null)
  const [headerHeight, setHeaderHeight] = useState<number>(0)
  const [badgeIcon, setBadgeIcon] = useState<string | undefined>()
  const { screenType } = useContext(AppContext)

  async function importRightBadge(id: string, badgeStatus: number) {
    // Les png doivent être au format idchallenge-badgestate.png
    const importedBadge =
      id === 'CHA00000001'
        ? await import(
            /* webpackMode: "eager" */ `assets/png/badges/${id}-1.png`
          )
        : await import(
            /* webpackMode: "eager" */ `assets/png/badges/${id}-${badgeStatus}.png`
          )
    setBadgeIcon(importedBadge.default)
  }

  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  const handleClick = (index: number) => {
    setChallengeEcogesture(index)
    setOpenEcogestureModal(true)
  }

  const handleCloseClick = () => {
    setOpenEcogestureModal(false)
  }

  useEffect(() => {
    if (props.location.state) {
      setChallenge(props && props.location.state.challenge)
      importRightBadge(
        props.location.state.challenge.challengeType.id,
        props.location.state.challenge.badge
      )
    }
  }, [])

  const result =
    challenge &&
    formatNumberValues(Math.abs(challenge.maxEnergy - challenge.currentEnergy))

  return (
    <React.Fragment>
      <CozyBar
        titleKey={'COMMON.APP_FINISHED_CHALLENGE_TITLE'}
        displayBackArrow={true}
      />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={'COMMON.APP_FINISHED_CHALLENGE_TITLE'}
        displayBackArrow={true}
      ></Header>
      {!props.location.state ? <Redirect to="/challenges" /> : null}
      <Content height={headerHeight} background="var(--darkLight2)">
        {!challenge ? (
          <StyledSpinner />
        ) : (
          <>
            <div className="cp-root">
              <div className="cp-content">
                <div className="cp-info">
                  <div className="cp-date text-16-normal">
                    {challenge.endingDate.setLocale('fr-FR').toLocaleString()}
                  </div>
                  <div className="cp-title text-22-bold">
                    {challenge.challengeType && challenge.challengeType.title}
                  </div>
                  {challenge.challengeType &&
                  challenge.challengeType.type === TypeChallenge.CHALLENGE ? (
                    challenge.badge === BadgeState.SUCCESS ? (
                      <div className="cp-result text-18-bold">
                        <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
                        <div className="cp-result-positif text-18-normal">{`${result} €`}</div>
                      </div>
                    ) : (
                      <div className="cp-result text-18-bold">
                        <div>{t('CHALLENGE.RESULT_NEGATIF')}</div>
                        <div className="cp-result-negatif text-18-normal">{`${result} €`}</div>
                      </div>
                    )
                  ) : null}
                  {challenge.badge === BadgeState.SUCCESS ? (
                    <div className="cp-win-badge-star">
                      <img
                        className="cp-win-badge"
                        src={badgeIcon}
                        width={screenType === ScreenType.MOBILE ? 200 : 300}
                      ></img>
                      <img
                        className="cp-win-star"
                        src={StarIcon}
                        width={screenType === ScreenType.MOBILE ? 380 : 480}
                      ></img>
                    </div>
                  ) : (
                    <img
                      className="cp-win-badge"
                      src={badgeIcon}
                      width={screenType === ScreenType.MOBILE ? 200 : 300}
                    ></img>
                  )}
                  <div className="cp-description text-16-bold">
                    {challenge.challengeType &&
                      challenge.challengeType.description}
                  </div>
                </div>
                <div className="cp-bottom">
                  <div className="cp-eg-content text-14-normal-uppercase">
                    {t('CHALLENGE.LINKED_ECOGESTURES')}
                    <div className="cp-ecogestures">
                      {challenge.selectedEcogestures
                        .filter((eg, index) => index < 2)
                        .map((eg, index) => (
                          <EcogestureCard
                            key={index}
                            ecogesture={eg}
                            handleClick={() => handleClick(index)}
                            challengeEcogesture={index + 1}
                          />
                        ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {openEcogestureModal && (
              <EcogestureModal
                opened={openEcogestureModal}
                ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
                handleCloseClick={handleCloseClick}
                unlockedEcogesture={true}
              />
            )}
          </>
        )}
      </Content>
    </React.Fragment>
  )
}

export default translate()(withClient(FinishedChallengeDetailsViewContainer))