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