InfoDataConsumptionVisualizer.tsx

import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useCallback, useState } from 'react'
import DateChartService from 'services/dateChart.service'
import { setCurrentIndex, setSelectedDate } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import NoDataModal from './NoDataModal'
import './infoDataConsumptionVisualizer.scss'

interface InfoDataConsumptionVisualizerProps {
  dataload: Dataload
  fluidType: FluidType
  lastDataDate: DateTime | null
}

const InfoDataConsumptionVisualizer = ({
  dataload,
  fluidType,
  lastDataDate,
}: InfoDataConsumptionVisualizerProps) => {
  const { t } = useI18n()
  const dispatch = useAppDispatch()
  const { currentTimeStep } = useAppSelector(state => state.ecolyo.chart)
  const [openNodataModal, setopenNodataModal] = useState<boolean>(false)

  const toggleNoDataModal = useCallback(() => {
    setopenNodataModal(prev => !prev)
  }, [])

  const moveToDate = () => {
    if (lastDataDate) {
      const dateChartService = new DateChartService()
      const updatedIndex: number = dateChartService.defineDateIndex(
        currentTimeStep,
        lastDataDate
      )
      dispatch(setSelectedDate(lastDataDate))
      dispatch(setCurrentIndex(updatedIndex))
    }
  }

  if (!dataload) {
    return <></>
  }

  if (
    dataload.state === DataloadState.MISSING ||
    dataload.state === DataloadState.UPCOMING ||
    dataload.state === DataloadState.COMING ||
    dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING ||
    dataload.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING ||
    dataload.state === DataloadState.AGGREGATED_COMING
  ) {
    const lastDate = lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
    return (
      <div onClick={() => moveToDate()} className="error-line">
        <span className="text-16-bold underlined-error">
          {fluidType === FluidType.MULTIFLUID
            ? t('consumption_visualizer.last_valid_data_multi', {
                date: lastDate,
              })
            : t('consumption_visualizer.last_available_data', {
                date: lastDate,
              })}
        </span>
      </div>
    )
  }

  if (
    dataload.state === DataloadState.EMPTY ||
    dataload.state === DataloadState.HOLE ||
    dataload.state === DataloadState.AGGREGATED_EMPTY
  ) {
    return (
      <>
        <div className="error-line" onClick={toggleNoDataModal}>
          <span className="text-16-normal underlined-error">
            {t('consumption_visualizer.why_no_data')}
          </span>
        </div>
        <NoDataModal
          open={openNodataModal}
          handleCloseClick={toggleNoDataModal}
        />
      </>
    )
  }

  return <></>
}

export default InfoDataConsumptionVisualizer