ChallengeModal.tsx

import React, { useState, useContext } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StarIcon from 'assets/png/challenge/star.png'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { formatNumberValues } from 'utils/utils'
import { ScreenType } from 'enum/screen.enum'
import { AppContext } from 'components/Contexts/AppContextProvider'

interface ChallengeModalProps {
  opened: boolean
  challenge: UserChallenge
  t: Function
  handleCloseClick: () => void
  badgeStatus: number | null
}

const ChallengeModal: React.FC<ChallengeModalProps> = ({
  opened,
  challenge,
  t,
  handleCloseClick,
  badgeStatus,
}: ChallengeModalProps) => {
  const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
  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 showTheRightBadge = (badgeStatus: number | null) => {
    const result =
      challenge &&
      formatNumberValues(
        Math.abs(challenge.maxEnergy - challenge.currentEnergy)
      )
    const challengeId = challenge.challengeType
      ? challenge.challengeType.id
      : ''
    const badge = challenge.badge ? challenge.badge : 0
    importRightBadge(challengeId, badge)
    if (badgeIcon) {
      if (badgeStatus === 1) {
        return (
          <>
            <div className="cm-title win text-24-bold ">
              {' '}
              {t('CHALLENGE.CONGRATULATION')}
            </div>
            <div className="cm-result text-18-bold">
              {challengeId !== 'CHA00000001' ? (
                <>
                  <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
                  <div className="cm-result-positif text-18-normal">{`${result} €`}</div>
                </>
              ) : null}
            </div>
            <div
              className={
                challengeId !== 'CHA00000001'
                  ? 'cm-win-badge-star'
                  : 'cm-win-badge-star --ecolyo-royal'
              }
            >
              <img
                className="cm-win-badge"
                src={badgeIcon}
                width={screenType === ScreenType.MOBILE ? 160 : 180}
              ></img>
              <img
                className="cm-win-star"
                src={StarIcon}
                width={screenType === ScreenType.MOBILE ? 300 : 400}
              ></img>
            </div>
            <div className="cm-txt">
              {' '}
              {challengeId === 'CHA00000001' ? (
                <>
                  <div className="text-18-medium">
                    {t('CHALLENGE.WIN_TEXT_ECOLYO')}
                  </div>
                  <div className="cm-text-new-available text-18-bold">
                    {t('CHALLENGE.WIN_TEXT_ECOLYO_NEW_AVAILABLE')}
                  </div>
                </>
              ) : (
                <div className="text-18-bold">
                  {t('CHALLENGE.WIN_TEXT')}
                  <div>{`"${challenge &&
                    challenge.challengeType &&
                    challenge.challengeType.title}"`}</div>
                </div>
              )}
            </div>
            <StyledButtonValid onClick={handleCloseClick}>
              {t('CHALLENGE.OK')}
            </StyledButtonValid>
          </>
        )
      } else {
        return (
          <>
            <div className="cm-title defeat text-24-bold ">
              {t('CHALLENGE.DEFEAT')}
            </div>
            <div className="cm-result text-18-bold">
              <div>{t('CHALLENGE.DEFEAT_RESULT')}</div>
              <div>
                {t('CHALLENGE.DEFEAT_RESULT2')}
                <span className="cm-result-negatif text-18-normal">{`${result} €`}</span>
              </div>
            </div>
            <img
              className="cm-badge"
              src={badgeIcon}
              width={screenType === ScreenType.MOBILE ? 160 : 180}
            ></img>
            <div className="cm-txt text-18-bold ">
              {' '}
              {t('CHALLENGE.CONSOLATION')}
              {`"${challenge &&
                challenge.challengeType &&
                challenge.challengeType.title}"`}
              {t('CHALLENGE.CONSOLATION2')}
            </div>
            <div className="cm-button-valid">
              <StyledButtonValid onClick={handleCloseClick}>
                {t('CHALLENGE.OK')}
              </StyledButtonValid>
            </div>
          </>
        )
      }
    }
  }
  return (
    <Modal open={opened} handleCloseClick={handleCloseClick} border>
      {!challenge ? (
        <StyledSpinner />
      ) : (
        <div className="cm-content">{showTheRightBadge(badgeStatus)}</div>
      )}
    </Modal>
  )
}

export default translate()(ChallengeModal)