DataloadNoValue.tsx

import React, { useCallback, useState } from 'react'
import './consumptionVisualizer.scss'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'

import { DateTime } from 'luxon'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import ConfigService from 'services/fluidConfig.service'
import NoDataModal from './NoDataModal'
import DateChartService from 'services/dateChart.service'

interface DataloadNoValueProps {
  dataload: Dataload
  fluidType: FluidType
  lastDataDate: DateTime | null
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}
enum NoDataState {
  DATA_TO_COME = 0,
  DATA_HOLE = 1,
  MISSING_DATA = 2,
}

const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
  dataload,
  fluidType,
  setActive,
  lastDataDate,
}: DataloadNoValueProps) => {
  const { t } = useI18n()
  const { currentDatachart } = useSelector(
    (state: AppStore) => state.ecolyo.chart
  )
  const configService = new ConfigService()
  const fluidConfig = configService.getFluidConfig()
  const [openNodataModal, setopenNodataModal] = useState<boolean>(false)
  const toggleNoDataModal = useCallback(() => {
    setopenNodataModal(prev => !prev)
  }, [])
  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])

  const getDataState = useCallback(() => {
    if (fluidType !== FluidType.MULTIFLUID) {
      //J+3 for elec and J+5 for the other ==> dataDelayPffset + 3
      const delay = fluidConfig[fluidType].dataDelayOffset + 3
      const today = DateTime.local().setZone('utc', {
        keepLocalTime: true,
      })
      const offsetDate = today.minus({ days: delay })
      if (dataload && offsetDate < dataload.date) {
        return NoDataState.DATA_TO_COME
      } else if (dataload && dataload.date < offsetDate) {
        const dateChartService = new DateChartService()
        if (
          dateChartService.isDataHole(currentDatachart) &&
          lastDataDate &&
          lastDataDate > dataload.date
        ) {
          return NoDataState.DATA_HOLE
        } else return NoDataState.MISSING_DATA
      } else return NoDataState.MISSING_DATA
    }
    return NoDataState.DATA_TO_COME
  }, [currentDatachart, dataload, fluidConfig, fluidType, lastDataDate])

  return (
    <>
      {getDataState() === NoDataState.DATA_TO_COME && (
        <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>
      )}
      {getDataState() === NoDataState.MISSING_DATA && (
        <div
          onClick={handleToggleKonnectionCard}
          className={`dataloadvisualizer-content error text-22-normal`}
        >
          {t('consumption_visualizer.missing_data')}
        </div>
      )}
      {getDataState() === NoDataState.DATA_HOLE && (
        <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
              className="text-15-normal no-data-text"
              onClick={toggleNoDataModal}
            >
              {t('consumption_visualizer.why_no_data')}
            </div>
          </div>
        </div>
      )}
      <NoDataModal
        open={openNodataModal}
        handleCloseClick={toggleNoDataModal}
      />
    </>
  )
}

export default DataloadNoValue