ChallengeCardDone.tsx

import React, { useEffect, useState } from 'react'
import './challengeCardDone.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import classNames from 'classnames'
import {
  formatNumberValues,
  getChallengeTitleWithLineReturn,
  importIconbyId,
} from 'utils/utils'
import { UserChallenge } from 'models'
import { UserChallengeSuccess } from 'enum/userChallenge.enum'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useHistory } from 'react-router-dom'
import { Button } from '@material-ui/core'

interface ChallengeCardDoneProps {
  userChallenge: UserChallenge
}

const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
  userChallenge,
}: ChallengeCardDoneProps) => {
  const { t } = useI18n()
  const history = useHistory()
  const [winIcon, setWinIcon] = useState<string>(defaultIcon)
  const [lossIcon, setLossIcon] = useState<string>(defaultIcon)

  const getUserSaving = (_userChallenge: UserChallenge) => {
    let label
    if (_userChallenge.success === UserChallengeSuccess.WIN)
      label = t('challenge.card_done.saving')
    else label = t('challenge.card_done.depense')

    return label + ' '
  }

  const getResultLabel = (_userChallenge: UserChallenge) => {
    switch (_userChallenge.success) {
      case UserChallengeSuccess.WIN:
        return t('challenge.card_done.win')
      case UserChallengeSuccess.LOST:
      default:
        return t('challenge.card_done.lost')
    }
  }

  const getIcon = (_userChallenge: UserChallenge) => {
    if (_userChallenge.success == UserChallengeSuccess.WIN) return winIcon
    else return lossIcon
  }

  const goDuel = async () => {
    history.push('/challenges/duel?id=' + userChallenge.id)
  }

  useEffect(() => {
    async function handleEcogestureIcon() {
      const icon = await importIconbyId(userChallenge.id + '-1', 'duelResult')
      if (icon) {
        setWinIcon(icon)
      } else {
        setWinIcon(defaultIcon)
      }
      const icon2 = await importIconbyId(userChallenge.id + '-0', 'duelResult')
      if (icon2) {
        setLossIcon(icon2)
      } else {
        setLossIcon(defaultIcon)
      }
    }
    handleEcogestureIcon()
  }, [userChallenge])

  return (
    <div className="cardContent cardDone">
      <div className="challengeName text-22-bold">
        {getChallengeTitleWithLineReturn(userChallenge.id)}
      </div>
      <div className="iconResult">
        <StyledIcon
          className="imgResult"
          icon={getIcon(userChallenge)}
          size={180}
        />
      </div>
      <div className="statsResult">
        <div
          className={classNames('labelResult', {
            ['win']: userChallenge.success === UserChallengeSuccess.WIN,
            ['lost']: userChallenge.success === UserChallengeSuccess.LOST,
          })}
        >
          {getResultLabel(userChallenge)}
        </div>
        <span className="text-18">
          {getUserSaving(userChallenge)}
          <span className="text-18-bold">
            {formatNumberValues(
              Math.abs(
                userChallenge.duel.threshold -
                  userChallenge.duel.userConsumption
              )
            ) + ' '}
            €
          </span>
          <br />
          {t('challenge.card_done.final_defi')}
        </span>
      </div>
      <Button
        aria-label={t('challenge.card_done.final_defi_view')}
        onClick={goDuel}
        classes={{
          root: 'btn-secondary-negative review-btn',
          label: 'text-15-bold',
        }}
      >
        {t('challenge.card_done.final_defi_view')}
      </Button>
    </div>
  )
}

export default ChallengeCardDone