import classNames from 'classnames' import { useI18n } from 'cozy-ui/transpiled/react/I18n' import { DataloadState, FluidType } from 'enums' import { Dataload } from 'models' import React, { useCallback } from 'react' import './consumptionVisualizer.scss' interface DataloadNoValueProps { dataload: Dataload fluidType: FluidType setActive: React.Dispatch<React.SetStateAction<boolean>> } const DataloadNoValue = ({ dataload, fluidType, setActive, }: DataloadNoValueProps) => { const { t } = useI18n() const handleToggleKonnectionCard = useCallback(() => { setActive(true) const app = document.querySelector('.app-content') const content = document.querySelector('.content-view') if (content && app) { setTimeout(() => { // Desktop devices app.scrollTo({ top: content.scrollHeight + 300, behavior: 'smooth', }) // Mobiles devices app.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end', }) }, 300) } }, [setActive]) if ( dataload.state === DataloadState.EMPTY || dataload.state === DataloadState.HOLE || dataload.state === DataloadState.AGGREGATED_EMPTY ) { return ( <div className={`dataloadvisualizer-content text-22-normal`}> <div className="dataloadvisualizer-section"> <div className={`dataloadvisualizer-value ${FluidType[ fluidType ].toLowerCase()} upper`} > {t('consumption_visualizer.no_data')} </div> </div> </div> ) } if ( dataload.state === DataloadState.MISSING || dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING ) { return ( <div onClick={handleToggleKonnectionCard} className={classNames('dataloadvisualizer-content text-22-normal', { ['error']: fluidType !== FluidType.MULTIFLUID, })} > {t('consumption_visualizer.missing_data')} </div> ) } return ( <div className={`dataloadvisualizer-content text-22-normal`}> <div className="dataloadvisualizer-section"> <div className={`dataloadvisualizer-value ${FluidType[ fluidType ].toLowerCase()} upper to-come`} > {t('consumption_visualizer.data_to_come')} </div> </div> </div> ) } export default DataloadNoValue