FluidChart.tsx

import React, { useState, useEffect, useCallback } from 'react'
import './fluidChart.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useDispatch, useSelector } from 'react-redux'
import { AppStore } from 'store'
import useExploration from 'components/Hooks/useExploration'

import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { UserExplorationID } from 'enum/userExploration.enum'
import ConsumptionService from 'services/consumption.service'

import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
import ActivateHalfHourLoad from 'components/ActivateHalfHourLoad/ActivateHalfHourLoad'
import FluidChartSwipe from './FluidChartSwipe'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
import { Profile } from 'models'
import { DateTime } from 'luxon'
import { updateProfile } from 'store/profile/profile.actions'
import OldFluidDataModal from 'components/Home/OldFluidDataModal'
import FluidService from 'services/fluid.service'
import { UsageEventType } from 'enum/usageEvent.enum'
import UsageEventService from 'services/usageEvent.service'

interface FluidChartProps {
  fluidType: FluidType
}

const FluidChart: React.FC<FluidChartProps> = ({
  fluidType,
}: FluidChartProps) => {
  const { t } = useI18n()
  const client = useClient()
  const dispatch = useDispatch()
  const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
  const profile: Profile = useSelector(
    (state: AppStore) => state.ecolyo.profile
  )
  const { currentTimeStep } = useSelector(
    (state: AppStore) => state.ecolyo.chart
  )
  const [, setValidExploration] = useExploration()
  const [isMinuteBlocked, setMinuteBlocked] = useState<boolean>(false)
  const [isLoaded, setIsLoaded] = useState<boolean>(false)
  const [showCompare, setShowCompare] = useState<boolean>(false)
  const [openOldFluidDataModal, setopenOldFluidDataModal] = useState(false)
  const [fluidOldData, setFluidOldData] = useState<FluidType[]>([])

  const handleCloseClick = useCallback(() => {
    dispatch(
      updateProfile({
        haveSeenOldFluidModal: DateTime.local().setZone('utc', {
          keepLocalTime: true,
        }),
      })
    )
    setopenOldFluidDataModal(false)
  }, [dispatch])

  const handleChangeSwitch = async () => {
    await UsageEventService.addEvent(client, {
      type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
      target: TimeStep[currentTimeStep],
      context: FluidType[fluidType],
    })
    setShowCompare(!showCompare)
  }

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      const consumptionService = new ConsumptionService(client)
      const activateHalfHourLoad = await consumptionService.checkDoctypeEntries(
        FluidType.ELECTRICITY,
        TimeStep.HALF_AN_HOUR
      )
      if (subscribed) {
        if (!activateHalfHourLoad) {
          setMinuteBlocked(true)
        }
        setIsLoaded(true)
        const oldFluidData = await FluidService.getOldFluidData(fluidStatus)
        const lastSeen: boolean | DateTime = profile.haveSeenOldFluidModal
        if (subscribed && oldFluidData.length > 0) {
          setFluidOldData(oldFluidData)
          if (lastSeen === false && subscribed) {
            setopenOldFluidDataModal(true)
          } else if (lastSeen) {
            const diff =
              typeof lastSeen === 'boolean'
                ? 0
                : lastSeen.diffNow('hours').toObject().hours
            if (diff && diff < -23) {
              setopenOldFluidDataModal(true)
            }
          }
        }
      }
    }
    loadData()
    return () => {
      subscribed = false
    }
  }, [client, fluidStatus, profile.haveSeenOldFluidModal])

  useEffect(() => {
    if (!isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR) {
      setValidExploration(UserExplorationID.EXPLORATION004)
    } else if (currentTimeStep === TimeStep.YEAR) {
      setValidExploration(UserExplorationID.EXPLORATION003)
    }
  }, [isMinuteBlocked, currentTimeStep, setValidExploration])

  return (
    <>
      {isLoaded && (
        <>
          <div className="fluidchart-root">
            {isMinuteBlocked && currentTimeStep === TimeStep.HALF_AN_HOUR ? (
              <ActivateHalfHourLoad />
            ) : (
              <div className="fluidchart-content">
                <ConsumptionVisualizer
                  fluidType={fluidType}
                  showCompare={
                    currentTimeStep === TimeStep.YEAR ? false : showCompare
                  }
                />
                <FluidChartSwipe
                  fluidType={fluidType}
                  showCompare={
                    currentTimeStep === TimeStep.YEAR ? false : showCompare
                  }
                />
              </div>
            )}
            <TimeStepSelector fluidType={fluidType} />
            {fluidType !== FluidType.MULTIFLUID &&
            currentTimeStep !== TimeStep.YEAR ? (
              <div className="fluidchart-footer" onClick={handleChangeSwitch}>
                <div className="fluidchart-footer-compare text-15-normal">
                  <StyledSwitch
                    fluidType={fluidType}
                    checked={showCompare}
                    inputProps={{
                      'aria-label': t(
                        'consumption.accessibility.checkbox_compare'
                      ),
                    }}
                  />
                  <span
                    className={
                      showCompare
                        ? `fluidchart-footer-label graph-switch-text selected`
                        : `fluidchart-footer-label graph-switch-text`
                    }
                  >
                    {t(
                      `timestep.${TimeStep[
                        currentTimeStep
                      ].toLowerCase()}.comparelabel`
                    )}
                  </span>
                </div>
              </div>
            ) : null}
          </div>
          {fluidStatus.length > 0 && (
            <OldFluidDataModal
              open={openOldFluidDataModal}
              fluidStatus={fluidStatus}
              fluidOldData={fluidOldData}
              handleCloseClick={handleCloseClick}
            />
          )}
        </>
      )}
    </>
  )
}

export default FluidChart