FluidChart.tsx

import { Button, Slide } from '@material-ui/core'
import LegendComparisonIcon from 'assets/icons/ico/legendComparison.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
import useExploration from 'components/Hooks/useExploration'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType, TimeStep, UsageEventType, UserExplorationID } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ConsumptionService from 'services/consumption.service'
import DateChartService from 'services/dateChart.service'
import UsageEventService from 'services/usageEvent.service'
import {
  setCurrentIndex,
  setSelectedDate,
  setShowCompare,
  setShowOfflineData,
} from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openConnectionModal } from 'store/modal/modal.slice'
import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import HalfHourNoData from './HalfHourNoData/HalfHourNoData'
import TimeStepSelector from './TimeStepSelector/TimeStepSelector'
import './fluidChart.scss'

interface FluidChartProps {
  fluidType: FluidType
  setActive: React.Dispatch<React.SetStateAction<boolean>>
}

const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
  const { t } = useI18n()
  const client = useClient()
  const {
    chart: { currentTimeStep, selectedDate, showCompare },
    global: { fluidStatus },
  } = useAppSelector(state => state.ecolyo)
  const dispatch = useAppDispatch()
  const navigate = useNavigate()

  const currentFluidStatus = fluidStatus[fluidType]
  const isFluidConnected = isKonnectorActive(fluidStatus, fluidType)
  const [, setValidExploration] = useExploration()
  const [containsHalfHourData, setContainsHalfHourData] =
    useState<boolean>(false)

  const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
  const lowercaseFluidType = getFluidName(fluidType)

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

  useEffect(() => {
    let subscribed = true
    async function loadData() {
      if (fluidType === FluidType.ELECTRICITY) {
        const consumptionService = new ConsumptionService(client)
        const halfHourData = await consumptionService.checkDoctypeEntries(
          FluidType.ELECTRICITY,
          TimeStep.HALF_AN_HOUR
        )
        if (halfHourData) {
          setContainsHalfHourData(true)
        }
      }
    }
    subscribed && loadData()

    return () => {
      subscribed = false
    }
  }, [client, fluidStatus, selectedDate, currentTimeStep, fluidType])

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

  const DisplayLegend = useCallback(
    () => (
      <div className="compareLegend">
        <div>
          <StyledIcon
            icon={LegendComparisonIcon}
            className={`${lowercaseFluidType} compare`}
          />
          <span className={`${lowercaseFluidType} compare`}>
            {t(`timestep.${lowercaseTimeStep}.last`)}
          </span>
        </div>
        <div>
          <StyledIcon
            icon={LegendComparisonIcon}
            className={lowercaseFluidType}
          />
          <span className={lowercaseFluidType}>
            {t(`timestep.${lowercaseTimeStep}.current`)}
          </span>
        </div>
      </div>
    ),
    [lowercaseFluidType, lowercaseTimeStep, t]
  )

  // TODO if we keep this, use the same existing function
  const moveToDate = () => {
    if (currentFluidStatus?.lastDataDate) {
      const dateChartService = new DateChartService()
      const updatedIndex = dateChartService.defineDateIndex(
        currentTimeStep,
        currentFluidStatus.lastDataDate
      )
      dispatch(setSelectedDate(currentFluidStatus.lastDataDate))
      dispatch(setCurrentIndex(updatedIndex))
    }
  }

  const toggleModalConnection = () => {
    switch (fluidType) {
      case FluidType.ELECTRICITY:
        navigate('/sge-connect')
        break
      case FluidType.GAS:
      case FluidType.WATER:
        dispatch(setShowOfflineData(false))
        dispatch(openConnectionModal(true))
        break
    }
  }

  const LastDataValid = () => (
    <div className="lastValidData">
      <span className="text-16-bold date" onClick={moveToDate}>
        {t('consumption_visualizer.last_valid_data', {
          date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') || '-',
        })}
      </span>
      <p>{t('auth.warningOfflineData')}</p>
      <Button
        classes={{
          root: 'btn-secondary-negative',
          label: 'text-16-bold',
        }}
        onClick={toggleModalConnection}
      >
        {t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
      </Button>
    </div>
  )

  return (
    <div className="fluidchart-root">
      {!isFluidConnected && <LastDataValid />}
      {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? (
        <HalfHourNoData />
      ) : (
        <>
          <div className="fluidchart-content">
            <FluidChartSwipe fluidType={fluidType} setActive={setActive} />
          </div>
          {showCompare && currentTimeStep !== TimeStep.YEAR && (
            <Slide direction="right" in={showCompare}>
              {DisplayLegend()}
            </Slide>
          )}
        </>
      )}
      <TimeStepSelector fluidType={fluidType} />
      {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="fluidchart-footer-label graph-switch-text">
              {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
            </span>
          </div>
        </div>
      )}
    </div>
  )
}

export default FluidChart