DataloadNoValue.tsx

import { Button } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { Dataload } from 'models'
import React, { useCallback } from 'react'
import { setShowConnectionDetails } from 'store/chart/chart.slice'
import { useAppDispatch } from 'store/hooks'
import { getFluidName } from 'utils/utils'
import './consumptionVisualizer.scss'

interface DataloadNoValueProps {
  dataload: Dataload
  fluidType: FluidType
}

const DataloadNoValue = ({ dataload, fluidType }: DataloadNoValueProps) => {
  const { t } = useI18n()
  const dispatch = useAppDispatch()
  const fluidName = getFluidName(fluidType)

  const handleToggleKonnectorCard = useCallback(() => {
    dispatch(setShowConnectionDetails(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)
    }
  }, [dispatch])

  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 ${fluidName} upper`}>
            {t('consumption_visualizer.no_data')}
          </div>
        </div>
      </div>
    )
  }

  if (
    dataload.state === DataloadState.MISSING ||
    dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING
  ) {
    return (
      <Button
        onClick={handleToggleKonnectorCard}
        classes={{ root: 'btnText', label: 'text-22-normal' }}
      >
        {t('consumption_visualizer.missing_data')}
      </Button>
    )
  }

  return (
    <div className="dataloadvisualizer-content text-22-normal">
      <div className="dataloadvisualizer-section">
        <div className={`dataloadvisualizer-value ${fluidName} upper to-come`}>
          {t('consumption_visualizer.data_to_come')}
        </div>
      </div>
    </div>
  )
}

export default DataloadNoValue