DataloadNoValue.tsx

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')}
      >
        {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