AnalysisConsumptionRow.tsx

import EuroIcon from 'assets/icons/ico/euro-icon.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { MonthlyForecast } from 'models'
import React from 'react'
import ConverterService from 'services/converter.service'
import { getPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
import './analysisConsumptionRow.scss'

interface AnalysisConsumptionRowProps {
  fluid: FluidType
  userPriceConsumption: number
  homePriceConsumption: number
  performanceValue: number | null
  forecast: MonthlyForecast | null
  connected: boolean
  noData: boolean
}

const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
  fluid,
  userPriceConsumption,
  homePriceConsumption,
  performanceValue,
  forecast,
  connected,
  noData,
}: AnalysisConsumptionRowProps) => {
  const { t } = useI18n()
  const converterService: ConverterService = new ConverterService()
  const maxPriceConsumption: number = Math.max(
    userPriceConsumption,
    homePriceConsumption
  )
  const fluidLoad: number =
    forecast && fluid !== FluidType.MULTIFLUID
      ? forecast.fluidForecast[fluid].load
      : 0

  const formatFluidConsumptionForConso = (_fluid: FluidType) => {
    if (_fluid === FluidType.MULTIFLUID) {
      return `${formatNumberValues(userPriceConsumption).toString()} €`
    } else {
      if (performanceValue) {
        // keeps unit in kWh for electricity and gas
        if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
          return `${Math.round(performanceValue)} ${t(
            `FLUID.${FluidType[_fluid]}.UNIT`
          )}`
        }
        return performanceValue >= 1000 || fluidLoad >= 1000
          ? formatNumberValues(performanceValue / 1000).toString() +
              ' ' +
              t(`FLUID.${FluidType[_fluid]}.MEGAUNIT`)
          : Math.round(performanceValue) +
              ' ' +
              t(`FLUID.${FluidType[_fluid]}.UNIT`)
      } else {
        return '-'
      }
    }
  }

  const formatFluidConsumptionForForecast = (_fluid: FluidType) => {
    if (_fluid === FluidType.MULTIFLUID) {
      return `${formatNumberValues(homePriceConsumption).toString()} €`
    } else {
      // keeps unit in kWh for electricity and gas
      if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
        return `${Math.round(fluidLoad)} ${t(
          `FLUID.${FluidType[_fluid]}.UNIT`
        )}`
      }
      return (performanceValue && performanceValue >= 1000) || fluidLoad >= 1000
        ? formatNumberValues(fluidLoad / 1000).toString() +
            ' ' +
            t(`FLUID.${FluidType[_fluid]}.MEGAUNIT`)
        : Math.round(fluidLoad) + ' ' + t(`FLUID.${FluidType[_fluid]}.UNIT`)
    }
  }

  const getWidthForConso = (_fluid: FluidType) => {
    if (_fluid === FluidType.MULTIFLUID) {
      return `${(userPriceConsumption / maxPriceConsumption) * 100}%`
    } else {
      return `${
        (converterService.LoadToEuro(performanceValue || 0, _fluid) /
          maxPriceConsumption) *
        100
      }%`
    }
  }

  const getWidthForForecast = (_fluid: FluidType) => {
    if (_fluid === FluidType.MULTIFLUID) {
      return `${(homePriceConsumption / maxPriceConsumption) * 100}%`
    } else {
      const fluidValue: number = forecast
        ? forecast.fluidForecast[_fluid].value
        : 0
      return `${(fluidValue / maxPriceConsumption) * 100}%`
    }
  }

  let comparaisonText: string
  if (connected) {
    comparaisonText = formatFluidConsumptionForConso(fluid)
  } else if (noData) {
    comparaisonText = t(`analysis.no_data_2`)
  } else {
    comparaisonText = t(`analysis.not_connected`)
  }

  return (
    <div
      className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`}
    >
      <div className="user-graph">
        <div
          className={classNames('price', 'text-15-bold', {
            ['not-connected']: !connected || noData,
          })}
        >
          {comparaisonText}
        </div>
        <div className="container-graph">
          {connected && (
            <div
              className="graph"
              style={{
                width: getWidthForConso(fluid),
              }}
            />
          )}
        </div>
      </div>
      <div className="icon-container">
        <StyledIcon
          icon={
            fluid === FluidType.MULTIFLUID ? EuroIcon : getPicto(fluid, true)
          }
          size={22}
        />
      </div>
      <div className="average-graph">
        <div className="container-graph">
          {connected && (
            <div
              className="graph"
              style={{
                width: getWidthForForecast(fluid),
              }}
            />
          )}
        </div>
        <div
          className={classNames('price', 'text-15-bold', {
            ['not-connected']: !connected,
          })}
        >
          {formatFluidConsumptionForForecast(fluid)}
        </div>
      </div>
    </div>
  )
}

export default AnalysisConsumptionRow