DataloadConsumptionVisualizer.tsx

import { DataloadSectionType, DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useCallback, useState } from 'react'
import { useAppSelector } from 'store/hooks'
import DataloadNoValue from './DataloadNoValue'
import DataloadSection from './DataloadSection'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
import './dataloadConsumptionVisualizer.scss'

interface DataloadConsumptionVisualizerProps {
  fluidType: FluidType
  dataload: Dataload
  compareDataload: Dataload | null
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}
const DataloadConsumptionVisualizer = ({
  fluidType,
  dataload,
  compareDataload,
  setActive,
}: DataloadConsumptionVisualizerProps) => {
  const { showCompare } = useAppSelector(state => state.ecolyo.chart)
  const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
  const toggleEstimationModal = useCallback(() => {
    setOpenEstimationModal(prev => !prev)
  }, [])

  if (!dataload || dataload.date > DateTime.local()) {
    return <div className="dataloadvisualizer-root" />
  }

  if (
    dataload.state !== DataloadState.VALID &&
    dataload.state !== DataloadState.AGGREGATED_VALID &&
    dataload.state !== DataloadState.AGGREGATED_WITH_EMPTY &&
    dataload.state !== DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING &&
    dataload.state !== DataloadState.AGGREGATED_WITH_COMING
  ) {
    return (
      <div className="dataloadvisualizer-root">
        <DataloadNoValue
          dataload={dataload}
          setActive={setActive}
          fluidType={fluidType}
        />
      </div>
    )
  }

  return (
    <div className="dataloadvisualizer-root">
      <div className="dataloadvisualizer-content">
        {showCompare && compareDataload ? (
          <>
            <DataloadSection
              dataload={compareDataload}
              fluidType={fluidType}
              dataloadSectionType={DataloadSectionType.LEFT}
              toggleEstimationModal={toggleEstimationModal}
            />
            <DataloadSection
              dataload={dataload}
              fluidType={fluidType}
              dataloadSectionType={DataloadSectionType.RIGHT}
              toggleEstimationModal={toggleEstimationModal}
            />
          </>
        ) : (
          <DataloadSection
            dataload={dataload}
            fluidType={fluidType}
            dataloadSectionType={DataloadSectionType.NO_COMPARE}
            toggleEstimationModal={toggleEstimationModal}
          />
        )}
      </div>
      <EstimatedConsumptionModal
        open={openEstimationModal}
        handleCloseClick={toggleEstimationModal}
      />
    </div>
  )
}

export default DataloadConsumptionVisualizer