FluidChartContent.tsx

import React, { useState, useEffect } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { DateTime } from 'luxon'
import {
  IConsumptionDataManager,
  IDataload,
  TimeStep,
  ITimePeriod,
  TimePeriod,
} from 'services/dataConsumptionContracts'
import {
  defineLastStepDate,
  defineDetailedTimeStep,
  formatDetailedDate,
  incrementDate,
} from 'services/dateChartService'
import { UserChallenge } from 'services/dataChallengeContracts'
import { FluidType } from 'enum/fluid.enum'

import Switch from 'components/CommonKit/Switch/StyledSwitch'
import FluidChartSwipe from 'components/ContentComponents/FluidChart/FluidChartSwipe'
import ConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisualizer/ConsumptionVisualizer'

import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import captionIcon from 'assets/icons/visu/challenge-caption-chart.svg'
import ActivateHalfHourLoad from '../ConsumptionNavigator/ActivateHalfHourLoad'

interface FluidChartContentProps {
  fluidTypes: FluidType[]
  timeStep: TimeStep
  referenceDate: DateTime
  lastDataDate: DateTime
  lastDateWithAllData: DateTime
  halfHourLoad: boolean
  multiFluid: boolean
  currentChallenge: UserChallenge | null
  consumptionDataManager: IConsumptionDataManager
  isDataLoaded: boolean
  handleDetailedDate(date: DateTime, timeStep: TimeStep): void
  t: Function
}

const FluidChartContent: React.FC<FluidChartContentProps> = ({
  fluidTypes,
  timeStep,
  referenceDate,
  lastDataDate,
  lastDateWithAllData,
  multiFluid,
  halfHourLoad,
  currentChallenge,
  consumptionDataManager,
  isDataLoaded,
  handleDetailedDate,
  t,
}: FluidChartContentProps) => {
  const [indexDisplayed, setIndexDisplayed] = useState<number>(0)
  const [selectedDate, setSelectedDate] = useState<DateTime>(referenceDate)
  const [selectedDataload, setSelectedDataload] = useState<IDataload>()
  const [selectedCompareDataload, setSelectedComparedataload] = useState<
    IDataload
  >()
  const [showCompare, setShowCompare] = useState<boolean>(false)
  const [isLoaded, setIsLoaded] = useState<boolean>(true)
  const challengePeriod: ITimePeriod | null =
    currentChallenge &&
    currentChallenge.startingDate &&
    currentChallenge.endingDate &&
    new TimePeriod(currentChallenge.startingDate, currentChallenge.endingDate)
  const handleChangeIndex = (index: number) => {
    const date =
      index === 0
        ? referenceDate
        : defineLastStepDate(referenceDate, timeStep, index)
    setSelectedDate(date)
    setIndexDisplayed(index)
    setIsLoaded(false)
  }

  const handleClickData = (
    dataload: IDataload,
    compareDataload: IDataload | null
  ) => {
    setSelectedDate(dataload.date)
    setSelectedDataload(dataload)
    if (compareDataload) {
      setSelectedComparedataload(compareDataload)
    }
    setIsLoaded(true)
  }

  const handleClickDetails = () => {
    const detailedTimeStep = defineDetailedTimeStep(timeStep, fluidTypes)
    const detailedDate = formatDetailedDate(selectedDate, detailedTimeStep)
    handleDetailedDate(detailedDate, detailedTimeStep)
    setIsLoaded(false)
  }

  const handleClickMove = (increment: number) => {
    const { incrementIndex, incrementedDate } = incrementDate(
      increment,
      selectedDate,
      timeStep
    )
    setSelectedDate(incrementedDate)
    if (incrementIndex != 0) {
      setIndexDisplayed(indexDisplayed + incrementIndex)
      setIsLoaded(false)
    }
  }

  const handleChangeSwitch = () => {
    setShowCompare(!showCompare)
  }

  useEffect(() => {
    setSelectedDate(referenceDate)
    setIndexDisplayed(0)
    setIsLoaded(false)
  }, [referenceDate, timeStep])

  return (
    <div className="fv-root">
      <div className="fv-header">
        <ConsumptionVisualizer
          fluidTypes={fluidTypes}
          timeStep={timeStep}
          date={selectedDate}
          dataload={selectedDataload}
          compareDataload={selectedCompareDataload}
          showCompare={showCompare}
          multiFluid={multiFluid}
          lastDataDate={lastDataDate}
          lastDateWithAllData={lastDateWithAllData}
          isLoaded={isLoaded}
          indexDisplayed={indexDisplayed}
          setSelectedDate={setSelectedDate}
          setIndexDisplayed={setIndexDisplayed}
          handleClickMove={handleClickMove}
          handleClickDetails={handleClickDetails}
          handleChangeIndex={handleChangeIndex}
        />
      </div>

      {!halfHourLoad && timeStep === 10 && (
        <ActivateHalfHourLoad timeStep={timeStep} />
      )}

      {isDataLoaded && (
        <FluidChartSwipe
          fluidTypes={fluidTypes}
          timeStep={timeStep}
          multiFluid={multiFluid}
          referenceDate={referenceDate}
          selectedDate={selectedDate}
          indexDisplayed={indexDisplayed}
          showCompare={showCompare}
          challengePeriod={challengePeriod}
          handleChangeIndex={handleChangeIndex}
          handleClickData={handleClickData}
          consumptionDataManager={consumptionDataManager}
        />
      )}
      {!multiFluid ? (
        <div className="fv-footer" onClick={handleChangeSwitch}>
          <div className="fv-footer-compare text-15-normal">
            <Switch fluidTypes={fluidTypes} checked={showCompare} />
            <span
              className={
                showCompare
                  ? `fv-footer-label graph-switch-text selected`
                  : `fv-footer-label graph-switch-text`
              }
            >
              {t(`TIMESTEP.${TimeStep[timeStep]}.COMPARELABEL`)}
            </span>
          </div>
        </div>
      ) : challengePeriod ? (
        <div className="fv-footer">
          <div className="fv-footer-challenge text-15-normal">
            <StyledIcon icon={captionIcon} size={34} />
            <span className="fv-footer-label-padding">
              {t('CHALLENGE.PERIOD')}
            </span>
          </div>
        </div>
      ) : null}
    </div>
  )
}

export default translate()(FluidChartContent)