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 { useMoveToLatestDate } from 'components/Hooks/useMoveToDate'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType, TimeStep, UserExplorationID } from 'enums'
import { DateTime } from 'luxon'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ConsumptionService from 'services/consumption.service'
import { setShowCompare, setShowOfflineData } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { getFluidName, getKonnectorSlug, isKonnectorActive } from 'utils/utils'
import FluidChartSwipe from './FluidChartSwipe'
import HalfHourNoDataFailure from './HalfHourNoDataFailure/HalfHourNoDataFailure'
import HalfHourUpcoming from './HalfHourUpcoming/HalfHourUpcoming'
import TimeStepSelector from './TimeStepSelector/TimeStepSelector'
import './fluidChart.scss'

const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
  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 { moveToLatestDate } = useMoveToLatestDate(
    currentFluidStatus?.lastDataDate
  )
  const [, setValidExploration] = useExploration()
  const [containsHalfHourData, setContainsHalfHourData] =
    useState<boolean>(false)

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

  const handleChangeSwitch = () => {
    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 compareLegend = 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]
  )

  const toggleModalConnection = () => {
    switch (fluidType) {
      case FluidType.ELECTRICITY:
        navigate('/connect/electricity')
        break
      case FluidType.GAS:
        navigate('/connect/gas')
        break
      case FluidType.WATER:
        dispatch(setShowOfflineData(false))
        break
      default:
        throw new Error('Unexpected fluid type')
    }
  }

  const LastDataValid = fluidType !== FluidType.MULTIFLUID && (
    <div className="lastValidData">
      <Button className="btnText" onClick={moveToLatestDate}>
        {t('consumption_visualizer.last_valid_data', {
          date: currentFluidStatus?.lastDataDate?.toFormat('dd/MM/yy') ?? '-',
        })}
      </Button>
      <p>{t('auth.warningOfflineData')}</p>
      <Button className="btnSecondary" onClick={toggleModalConnection}>
        {t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
      </Button>
    </div>
  )

  const isKonnectorUpdatedWithinLastThreeDays =
    DateTime.fromISO(
      currentFluidStatus?.connection?.trigger?.cozyMetadata?.createdAt || ''
    ) >= DateTime.local().minus({ days: 3 })

  /** Display no half hour components or FluidChart otherwise */
  const chartContent = () => {
    if (currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData) {
      return isKonnectorUpdatedWithinLastThreeDays ? (
        <HalfHourUpcoming />
      ) : (
        <HalfHourNoDataFailure />
      )
    }
    return (
      <>
        <div className="fluidchart-content">
          <FluidChartSwipe fluidType={fluidType} />
        </div>
        {showCompare && currentTimeStep !== TimeStep.YEAR && (
          <Slide direction="right" in={showCompare}>
            {compareLegend()}
          </Slide>
        )}
      </>
    )
  }

  return (
    <div className="fluidchart-root">
      {!isFluidConnected && LastDataValid}
      {chartContent()}
      <TimeStepSelector fluidType={fluidType} />
      {currentTimeStep !== TimeStep.YEAR && (
        <div className="fluidchart-footer">
          <div className="fluidchart-footer-compare text-15-normal">
            <StyledSwitch
              fluidType={fluidType}
              checked={showCompare}
              aria-label={t('consumption.accessibility.checkbox_compare')}
              onClick={handleChangeSwitch}
            />
            <span className="fluidchart-footer-label graph-switch-text">
              {t(`timestep.${lowercaseTimeStep}.comparelabel`)}
            </span>
          </div>
        </div>
      )}
    </div>
  )
}

export default FluidChart