HomeViewContainer.tsx

import React, { useState, useContext } 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 { TimeStep } from 'services/dataConsumptionContracts'
import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
import { AppContext } from 'components/Contexts/AppContextProvider'
import MultliFluidIndicatorsContainer from 'components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer'
import ChallengeCardContainer from 'components/ContainerComponents/ChallengeCardContainer/ChallengeCardContainer'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'

const HomeViewContainer: React.FC = () => {
  const { fluidTypes, previousTimeStep, setPreviousTimeStep } = useContext(
    AppContext
  )
  const [timeStep, setTimeStep] = useState<TimeStep>(
    previousTimeStep && previousTimeStep !== TimeStep.HALF_AN_HOUR
      ? previousTimeStep
      : TimeStep.DAY
  )
  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)
    setPreviousTimeStep(_timeStep)
  }

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

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

  return (
    <React.Fragment>
      <CozyBar />
      {fluidTypes && fluidTypes.length > 0 ? (
        <>
          <Header
            setHeaderHeight={defineHeaderHeight}
            textKey={'COMMON.APP_PRESENTATION'}
          >
            <ConsumptionNavigator
              fluidTypes={fluidTypes}
              multiFluid={true}
              timeStep={timeStep}
              handleClickTimeStep={handleClickTimeStepForNavigation}
            />
          </Header>
          <Content height={headerHeight}>
            {(isChartLoading || isIndicatorsLoading) && (
              <div className="content-view-loading">
                <StyledSpinner size="5em" />
              </div>
            )}
            <div
              className={`${
                isChartLoading || isIndicatorsLoading
                  ? 'chart-indicator-none'
                  : 'chart-indicator-block'
              }`}
            >
              <FluidContainer
                timeStep={timeStep}
                fluidTypes={fluidTypes}
                resetReferenceDate={resetRefenceDate}
                multiFluid={true}
                handleClickTimeStep={handleClickTimeStepForFluidContainer}
                setChartLoaded={setChartLoaded}
              />
              <MultliFluidIndicatorsContainer
                timeStep={timeStep}
                setIndicatorsLoaded={setIndicatorsLoaded}
              />
              <ChallengeCardContainer />
            </div>
          </Content>
        </>
      ) : (
        <>
          <Header setHeaderHeight={defineHeaderHeight}></Header>
          <Content height={headerHeight}>
            <KonnectorViewerContainer></KonnectorViewerContainer>
          </Content>
        </>
      )}
    </React.Fragment>
  )
}

export default HomeViewContainer