MaxConsumptionCard.tsx

import React, { useCallback, useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import RigthArrowIcon from 'assets/icons/ico/right-arrow.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import IconButton from '@material-ui/core/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
import GraphIcon from 'assets/icons/ico/graph-icon.svg'
import { FluidType } from 'enum/fluid.enum'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import { getNavPicto } from 'utils/picto'
import { DateTime } from 'luxon'
import { useClient } from 'cozy-client'
import { TimeStep } from 'enum/timeStep.enum'
import { Dataload, TimePeriod } from 'models'
import ConsumptionDataManager from 'services/consumption.service'
import './maxConsumptionCard.scss'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import { formatNumberValues } from 'utils/utils'

interface MaxConsumptionCardProps {
  analysisDate: DateTime
}

const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({
  analysisDate,
}: MaxConsumptionCardProps) => {
  const { t } = useI18n()
  const client = useClient()

  const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
  const [index, setIndex] = useState<number>(0)

  const [maxDayData, setMaxDayData] = useState<Dataload | null>(null)
  const [isLoading, setisLoading] = useState<boolean>(false)

  const handleChangePrevFluid = useCallback(() => {
    setisLoading(true)
    if (index === 0) {
      setIndex(fluidTypes.length - 1)
    } else {
      setIndex(prev => prev - 1)
    }
  }, [fluidTypes, index])

  const handleChangeNextFluid = useCallback(() => {
    setisLoading(true)
    if (index === fluidTypes.length - 1) {
      setIndex(0)
    } else {
      setIndex(prev => prev + 1)
    }
  }, [fluidTypes, index])

  useEffect(() => {
    let subscribed = true
    async function getMaxLoadData() {
      setisLoading(true)
      const timePeriod: TimePeriod = {
        startDate: analysisDate.minus({ month: 1 }).startOf('month'),
        endDate: analysisDate.minus({ month: 1 }).endOf('month'),
      }
      const consumptionService = new ConsumptionDataManager(client)
      const monthMaxData = await consumptionService.getMaxLoad(
        timePeriod,
        TimeStep.DAY,
        [fluidTypes[index]],
        undefined,
        false,
        true
      )
      if (monthMaxData) {
        setMaxDayData(monthMaxData as Dataload)
      } else {
        setMaxDayData(null)
      }
      setisLoading(false)
    }
    if (subscribed) {
      getMaxLoadData()
    }
    return () => {
      subscribed = false
    }
  }, [analysisDate, client, fluidTypes, index])
  return (
    <div className="max-consumption-container">
      <StyledIcon icon={GraphIcon} size={38} />
      <div className="text-16-normal title">{t('analysis.max_day')}</div>
      <div className="fluid-navigation">
        {fluidTypes.length > 1 && (
          <IconButton
            aria-label={t('consumption.accessibility.button_previous_value')}
            onClick={handleChangePrevFluid}
            className="arrow-prev"
          >
            <Icon icon={LeftArrowIcon} size={24} />
          </IconButton>
        )}
        <div
          className={`text-20-bold fluid ${FluidType[
            fluidTypes[index]
          ].toLowerCase()}`}
        >
          {`${t('FLUID.' + FluidType[fluidTypes[index]] + '.LABEL')}`}
        </div>
        {fluidTypes.length > 1 && (
          <IconButton
            aria-label={t('consumption.accessibility.button_previous_value')}
            onClick={handleChangeNextFluid}
            className="arrow-next"
          >
            <Icon icon={RigthArrowIcon} size={24} />
          </IconButton>
        )}
      </div>
      <div className="data-container">
        {!isLoading ? (
          maxDayData ? (
            <>
              <div className="text-24-bold maxDay-date">
                {maxDayData.date.setLocale('fr').toFormat('cccc dd LLLL')}
              </div>
              <Icon
                className="dataloadvisualizer-euro-fluid-icon"
                icon={getNavPicto(fluidTypes[index], true, true)}
                size={38}
              />
              <div className="maxDay-load">
                {maxDayData.value >= 1000 ? (
                  <>
                    {formatNumberValues(
                      maxDayData.value,
                      FluidType[fluidTypes[index]]
                    )}

                    {` ${t(
                      'FLUID.' + FluidType[fluidTypes[index]] + '.MEGAUNIT'
                    )}`}
                  </>
                ) : (
                  <>
                    {formatNumberValues(
                      maxDayData.value,
                      FluidType[fluidTypes[index]]
                    )}

                    {` ${t('FLUID.' + FluidType[fluidTypes[index]] + '.UNIT')}`}
                  </>
                )}
              </div>
            </>
          ) : (
            <p className={`text-20-bold no_data`}>{t('analysis.no_data')}</p>
          )
        ) : (
          <StyledSpinner size="3em" fluidType={fluidTypes[index]} />
        )}
      </div>
    </div>
  )
}

export default MaxConsumptionCard