SingleFluidViewContainer.tsx

import React, { useState } from 'react'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'services/dataConsumptionContracts'
import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
import SingleFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/SingleFluidIndicatorsContainer'

interface SingleFluidViewContainerProps {
  fluidTypes: FluidType[]
}
const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
  fluidTypes,
}: SingleFluidViewContainerProps) => {
  const [timeStep, setTimeStep] = useState<TimeStep>(20)
  const [resetRefenceDate, setResetReferenceDate] = useState<boolean>(false)
  const [headerHeight, setHeaderHeight] = useState<number>(0)

  const [isChartLoading, setChartLoading] = useState<boolean>(true)
  const [isIndicatorsLoading, setIndicatorsLoading] = useState<boolean>(true)

  const setChartLoaded = () => {
    setChartLoading(false)
  }

  const setIndicatorsLoaded = () => {
    setIndicatorsLoading(false)
  }

  const handleClickTimeStepForNavigation = (_timeStep: TimeStep) => {
    setResetReferenceDate(true)
    setTimeStep(_timeStep)
  }

  const handleClickTimeStepForFluidContainer = (_timeStep: TimeStep) => {
    setResetReferenceDate(false)
    setTimeStep(_timeStep)
  }

  const defineHeaderHeight = (height: number) => {
    setHeaderHeight(height)
  }

  return (
    <>
      <CozyBar
        titleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
        displayBackArrow={true}
      />
      <Header
        setHeaderHeight={defineHeaderHeight}
        desktopTitleKey={`FLUID.${FluidType[fluidTypes[0]]}.NAME`}
        displayBackArrow={true}
      >
        <ConsumptionNavigator
          fluidTypes={fluidTypes}
          multiFluid={false}
          timeStep={timeStep}
          handleClickTimeStep={handleClickTimeStepForNavigation}
        />
      </Header>
      <Content height={headerHeight}>
        {(isChartLoading || isIndicatorsLoading) && (
          <div className="content-view-loading">
            <StyledSpinner size="5em" fluidTypes={fluidTypes} />
          </div>
        )}
        <FluidContainer
          timeStep={timeStep}
          fluidTypes={fluidTypes}
          resetReferenceDate={resetRefenceDate}
          multiFluid={false}
          handleClickTimeStep={handleClickTimeStepForFluidContainer}
          setChartLoaded={setChartLoaded}
        />
        <SingleFluidIndicatorsContainer
          timeStep={timeStep}
          setIndicatorsLoaded={setIndicatorsLoaded}
          fluidTypes={fluidTypes}
        />
      </Content>
    </>
  )
}

export default SingleFluidViewContainer