DataloadSectionValue.tsx

import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadSectionType, FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
import { formatNumberValues } from 'utils/utils'

interface DataloadSectionValueProps {
  dataload: Dataload
  fluidType: FluidType
  dataloadSectionType: DataloadSectionType
  toggleEstimationModal: () => void
}

const DataloadSectionValue = ({
  dataload,
  fluidType,
  dataloadSectionType,
  toggleEstimationModal,
}: DataloadSectionValueProps) => {
  const { t } = useI18n()

  if (fluidType === FluidType.MULTIFLUID) {
    return (
      <>
        {formatNumberValues(dataload.value)}
        <span className="text-18-normal euroUnit">
          {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
        </span>
        {dataloadSectionType === DataloadSectionType.NO_COMPARE && (
          <span
            className="text-14-normal estimated"
            onClick={toggleEstimationModal}
          >
            {t('consumption_visualizer.estimated')}
          </span>
        )}
      </>
    )
  }

  const formattedValue = formatNumberValues(
    dataload.value,
    FluidType[fluidType],
    true
  )

  return (
    <>
      {Number(formattedValue) >= 1000 ? (
        <>
          {formatNumberValues(dataload.value, FluidType[fluidType])}
          <span className="text-18-normal">
            {t(`FLUID.${FluidType[fluidType]}.MEGAUNIT`)}
          </span>
        </>
      ) : (
        <>
          {formatNumberValues(dataload.value)}
          <span className="text-18-normal">
            {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
          </span>
        </>
      )}
    </>
  )
}

export default DataloadSectionValue