ConsumptionVisualizer.tsx

import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { DateTime } from 'luxon'
import { TimeStep, IDataload } from 'services/dataConsumptionContracts'

import { isDataToCome } from 'services/dateChartService'
import DateConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DateConsumptionVisualizer'
import DataloadConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer'
import DetailedConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/DetailedConsumptionVisualizer'
import LastDataConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/LastDataConsumptionVisualizer'
import ErrorDataConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'

interface ConsumptionVisualizerProps {
  fluidTypes: FluidType[]
  timeStep: TimeStep
  date: DateTime
  dataload: IDataload
  compareDataload: IDataload
  showCompare: boolean
  multiFluid: boolean
  lastDataDate: DateTime
  lastDateWithAllData: DateTime
  isLoaded: boolean
  indexDisplayed: number
  setSelectedDate: Function
  setIndexDisplayed: Function
  handleClickMove: (increment: number) => void
  handleClickDetails: () => void
  handleChangeIndex: (index: number) => void
}
const ConsumptionVisualizer = ({
  fluidTypes,
  timeStep,
  date,
  dataload,
  compareDataload,
  showCompare,
  multiFluid,
  lastDataDate,
  lastDateWithAllData,
  isLoaded,
  indexDisplayed,
  setSelectedDate,
  setIndexDisplayed,
  handleClickMove,
  handleClickDetails,
  handleChangeIndex,
}: ConsumptionVisualizerProps) => {
  return (
    <div className="cv">
      <DateConsumptionVisualizer
        timeStep={timeStep}
        date={date}
        handleClickMove={handleClickMove}
        indexDisplayed={indexDisplayed}
        handleChangeIndex={handleChangeIndex}
      />
      <DataloadConsumptionVisualizer
        fluidTypes={fluidTypes}
        dataload={dataload}
        compareDataload={compareDataload}
        showCompare={showCompare}
        multiFluid={multiFluid}
        lastDataDate={lastDataDate}
        isLoaded={isLoaded}
      />
      <div className="cv-info">
        {!multiFluid && dataload && dataload.value > -1 && (
          <DetailedConsumptionVisualizer
            fluidTypes={fluidTypes}
            timeStep={timeStep}
            multiFluid={multiFluid}
            handleClickDetails={handleClickDetails}
          />
        )}
        {dataload &&
          dataload.valueDetail &&
          ((dataload.valueDetail[0] === -1 &&
            !isDataToCome(dataload, fluidTypes[0])) ||
            (dataload.valueDetail[1] === -1 &&
              !isDataToCome(dataload, fluidTypes[1])) ||
            (dataload.valueDetail[2] === -1 &&
              !isDataToCome(dataload, fluidTypes[2]))) && (
            <ErrorDataConsumptionVisualizer
              date={date}
              indexDisplayed={indexDisplayed}
              setIndexDisplayed={setIndexDisplayed}
              lastDateWithAllData={lastDateWithAllData}
              setSelectedDate={setSelectedDate}
            />
          )}
        {!dataload ||
          (dataload && dataload.value === -1 && (
            <LastDataConsumptionVisualizer
              fluidTypes={fluidTypes}
              timeStep={timeStep}
              multiFluid={multiFluid}
              handleChangeIndex={handleChangeIndex}
            />
          ))}
      </div>
    </div>
  )
}

export default translate()(ConsumptionVisualizer)