DataloadSectionValue.tsx

import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { DataloadSectionType, FluidType } from 'enums'
import { Dataload } from 'models'
import React from 'react'
import { formatNumberValues, getFluidName } from 'utils/utils'

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

const DataloadSectionValue = ({
  dataload,
  fluidType,
  dataloadSectionType,
  toggleEstimationModal,
  focusable,
}: DataloadSectionValueProps) => {
  const { t } = useI18n()
  const FLUIDNAME = getFluidName(fluidType).toUpperCase()

  if (fluidType === FluidType.MULTIFLUID) {
    return (
      <>
        {formatNumberValues(dataload.value)}
        <div className="text-18-normal euroUnit">
          {t(`FLUID.${FLUIDNAME}.UNIT`)}
        </div>
        {dataloadSectionType === DataloadSectionType.NO_COMPARE && (
          <Button
            classes={{
              root: 'btnText',
              label: 'text-14-normal',
            }}
            size="small"
            onClick={toggleEstimationModal}
            tabIndex={focusable ? 0 : -1}
          >
            {t('consumption_visualizer.estimated')}
          </Button>
        )}
      </>
    )
  }

  const formattedValue = formatNumberValues(dataload.value, FLUIDNAME, true)

  if (Number(formattedValue) >= 1000) {
    return (
      <>
        {formatNumberValues(dataload.value, FLUIDNAME)}
        <span className="text-18-normal">
          {t(`FLUID.${FLUIDNAME}.MEGAUNIT`)}
        </span>
      </>
    )
  }

  return (
    <>
      {formatNumberValues(dataload.value)}
      <span className="text-18-normal">{t(`FLUID.${FLUIDNAME}.UNIT`)}</span>
    </>
  )
}

export default DataloadSectionValue