OngoingChallengePile.tsx

import React, { useState, useEffect } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { UserChallenge } from 'services/dataChallengeContracts'
import { formatNumberValues } from 'utils/utils'
import pile from 'assets/icons/visu/challenge/pile.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'

interface OngoingChallengePileProps {
  challenge: UserChallenge
  small?: boolean
  t: Function
}

const OngoingChallengePile: React.FC<OngoingChallengePileProps> = ({
  challenge,
  small = false,
  t,
}: OngoingChallengePileProps) => {
  const [pilePercent, setPilePercent] = useState<number>(0)
  const sizePile = small ? 100 : 150
  const textFont = small ? 'text-17-bold' : 'text-20-bold'

  const getPileSectionPercent = (percent: number) => {
    if (percent <= 100) {
      return Math.floor(percent / 5) * 5
    }
    return 100
  }

  useEffect(() => {
    if (challenge) {
      const percent =
        challenge.maxEnergy > 0
          ? (challenge.currentEnergy * 100) / challenge.maxEnergy
          : 0
      setPilePercent(getPileSectionPercent(percent))
    }
  }, [])

  return (
    <React.Fragment>
      <div className="pile-energy-follow">
        <div className="pile-section">
          <div
            className="filter-pile"
            style={{
              width: `${pilePercent}%`,
              height: `${small ? '30px' : '46px'}`,
            }}
          ></div>
          <StyledIcon className="pile-icon" icon={pile} size={sizePile} />
        </div>
        {challenge && challenge.maxEnergy > 0 ? (
          <div className={`values-section ${textFont}`}>
            <span>
              {challenge.currentEnergy
                ? formatNumberValues(
                    challenge.maxEnergy - challenge.currentEnergy
                  )
                : formatNumberValues(challenge.maxEnergy)}{' '}
              €
            </span>
            <span className="max-energy">
              {' '}
              / {formatNumberValues(challenge.maxEnergy)} €
            </span>
          </div>
        ) : (
          <div className={`no-values-section text-18-normal`}>
            {t('CHALLENGE.RESULT_NOT_AVAILABLE')}
          </div>
        )}
      </div>
    </React.Fragment>
  )
}

export default translate()(OngoingChallengePile)