TotalConsumption.tsx

import Coin from 'assets/icons/ico/coin.svg'
import Coins from 'assets/icons/ico/coins.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { Dataload } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import ConsumptionService from 'services/consumption.service'
import ConverterService from 'services/converter.service'
import { AppStore } from 'store'
import { formatNumberValues } from 'utils/utils'
import './totalConsumption.scss'

const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
  const { currentTimeStep, showCompare, currentDatachart } = useSelector(
    (state: AppStore) => state.ecolyo.chart
  )
  const client = useClient()
  const [totalValue, setTotalValue] = useState<string>()
  const [previousTotalValue, setPreviousTotalValue] = useState<string>()

  const computeTotal = useCallback(
    async (
      dataload: Dataload[],
      setState: React.Dispatch<React.SetStateAction<string | undefined>>
    ) => {
      const consumptionService = new ConsumptionService(client)
      const activateHalfHourLoad =
        fluidType === FluidType.ELECTRICITY
          ? await consumptionService.checkDoctypeEntries(
              FluidType.ELECTRICITY,
              TimeStep.HALF_AN_HOUR
            )
          : false

      const converterService = new ConverterService()
      let total = 0
      let totalPrice = 0

      dataload.forEach(data => {
        if (data.value !== -1) {
          total += data.value
          totalPrice += converterService.LoadToEuro(
            data.value,
            fluidType,
            data.price
          )
        }
      })

      let displayedValue
      if (
        total <= 0 ||
        (!activateHalfHourLoad &&
          currentTimeStep === TimeStep.HALF_AN_HOUR &&
          fluidType === FluidType.ELECTRICITY)
      ) {
        displayedValue = '-----'
      } else if (fluidType === FluidType.MULTIFLUID) {
        displayedValue = formatNumberValues(total).toString()
      } else if (totalPrice <= 0) {
        displayedValue = formatNumberValues(
          converterService.LoadToEuro(total, fluidType)
        ).toString()
      } else {
        displayedValue = formatNumberValues(totalPrice).toString()
      }

      setState(displayedValue)
    },
    [client, currentTimeStep, fluidType]
  )

  useEffect(() => {
    computeTotal(currentDatachart.actualData, setTotalValue)
    if (currentDatachart.comparisonData) {
      computeTotal(currentDatachart.comparisonData, setPreviousTotalValue)
    }
  }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])

  return (
    <div className="icon-line">
      {showCompare ? (
        <StyledIcon className="pile-icon" icon={Coins} size={48} />
      ) : (
        <StyledIcon className="pile-icon" icon={Coin} size={48} />
      )}
      <div>
        <span className="euro-value">{totalValue}</span>
        <span className="euro-symbol"> €</span>
      </div>
      {showCompare && (
        <div className="compare">
          <span className="euro-value">{previousTotalValue}</span>
          <span className="euro-symbol"> €</span>
        </div>
      )}
    </div>
  )
}

export default TotalConsumption