ElecHalfHourMonthlyAnalysis.tsx

import IconButton from '@material-ui/core/IconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
import MinIcon from 'assets/icons/ico/minimum.svg'
import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType, TimeStep } from 'enums'
import {
  AggregatedEnedisMonthlyDataloads,
  EnedisMonthlyAnalysisData,
  FluidPrice,
  PerformanceIndicator,
} from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import ConsumptionService from 'services/consumption.service'
import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
import FluidPricesService from 'services/fluidsPrices.service'
import { useAppSelector } from 'store/hooks'
import { getNavPicto } from 'utils/picto'
import ElecHalfHourChart from './ElecHalfHourChart'
import ElecInfoModal from './ElecInfoModal'
import './elecHalfHourMonthlyAnalysis.scss'

const ElecHalfHourMonthlyAnalysis = ({
  perfIndicator,
}: {
  perfIndicator: PerformanceIndicator
}) => {
  const { t } = useI18n()
  const client = useClient()
  const { analysisMonth } = useAppSelector(state => state.ecolyo.analysis)
  const [isWeekend, setIsWeekend] = useState<boolean>(true)
  const [isHalfHourActivated, setIsHalfHourActivated] = useState<boolean>(true)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const [monthDataloads, setMonthDataloads] =
    useState<AggregatedEnedisMonthlyDataloads>()
  const [enedisAnalysisValues, setEnedisAnalysisValues] =
    useState<EnedisMonthlyAnalysisData>()
  const [facturePercentage, setFacturePercentage] = useState<number>()
  const [elecPrice, setElecPrice] = useState<FluidPrice>()
  const [openInfoModal, setOpenInfoModal] = useState<boolean>(false)

  const handleChangeWeek = useCallback(() => {
    setIsWeekend(prev => !prev)
  }, [])

  const toggleOpenModal = useCallback(() => {
    setOpenInfoModal(prev => !prev)
  }, [])
  const isDataFullyComplete = useCallback(monthDataloads => {
    if (
      monthDataloads?.weekend &&
      monthDataloads.week &&
      monthDataloads.weekend[0]?.value !== null &&
      monthDataloads.week[0]?.value !== null
    ) {
      return true
    } else return false
  }, [])

  const getPowerChart = useCallback((): JSX.Element => {
    if (monthDataloads && isDataFullyComplete(monthDataloads)) {
      return (
        <ElecHalfHourChart
          dataLoad={isWeekend ? monthDataloads.weekend : monthDataloads.week}
          isWeekend={isWeekend}
        />
      )
    } else {
      return <p className="text-20-bold no_data">{t('analysis.no_data')}</p>
    }
  }, [isDataFullyComplete, isWeekend, monthDataloads, t])

  useEffect(() => {
    let subscribed = true
    async function fetchEnedisAnalysisData() {
      const cs = new ConsumptionService(client)
      const isHalfHourLoadActivated = await cs.checkDoctypeEntries(
        FluidType.ELECTRICITY,
        TimeStep.HALF_AN_HOUR
      )
      if (!subscribed) return
      if (isHalfHourLoadActivated) {
        const emas = new EnedisMonthlyAnalysisDataService(client)
        const aggregatedDate = analysisMonth.minus({ month: 1 })
        const data = await emas.getEnedisMonthlyAnalysisByDate(
          aggregatedDate.year,
          aggregatedDate.month
        )
        if (data?.length) {
          const aggregatedData = emas.aggregateValuesToDataLoad(data[0])
          setEnedisAnalysisValues(data[0])
          setMonthDataloads(aggregatedData)
          if (data[0].minimumLoad && perfIndicator.value) {
            const percentage = (data[0].minimumLoad / perfIndicator.value) * 100
            setFacturePercentage(percentage)
          }
        }
      } else {
        setIsHalfHourActivated(false)
      }

      setIsLoading(false)
    }
    fetchEnedisAnalysisData()

    return () => {
      subscribed = false
    }
  }, [analysisMonth, client, perfIndicator])

  useEffect(() => {
    let subscribed = true
    const fluidsPricesService = new FluidPricesService(client)
    async function getAllLastPrices() {
      const price: FluidPrice = await fluidsPricesService.getPrices(
        FluidType.ELECTRICITY,
        analysisMonth.minus({ month: 1 })
      )
      if (subscribed && price) {
        setElecPrice(price)
      }
    }
    getAllLastPrices()

    return () => {
      subscribed = false
    }
  }, [analysisMonth, client])

  return (
    <div className="special-elec-container">
      <Icon
        className="elec-icon"
        icon={getNavPicto(FluidType.ELECTRICITY, true, true)}
        size={42}
      />
      <div className="text-18-normal title">{t('special_elec.title')}</div>
      {!isHalfHourActivated && (
        <div className="activation-text text-18-normal">
          {t(`timestep.half_an_hour.analysis_waiting_data`)}
        </div>
      )}
      {isHalfHourActivated && (
        <>
          <div className="navigator">
            <IconButton
              aria-label={t('consumption.accessibility.button_previous_value')}
              onClick={handleChangeWeek}
              className="arrow-prev"
            >
              <Icon icon={LeftArrowIcon} size={24} />
            </IconButton>
            <div className="average text-18-normal">
              <div className="text-1">{t('special_elec.average')}</div>
              <div className="text-2 text-18-bold">
                {t('special_elec.weektype')}{' '}
                <span className={isWeekend ? 'weekend' : 'week'}>
                  {isWeekend
                    ? t('special_elec.weekend')
                    : t('special_elec.week')}
                </span>
              </div>
            </div>
            <IconButton
              aria-label={t('consumption.accessibility.button_previous_value')}
              onClick={handleChangeWeek}
              className="arrow-next"
            >
              <Icon icon={RightArrowIcon} size={24} />
            </IconButton>
          </div>
          {isLoading && <Loader color="elec" />}
          {!isLoading && (
            <>
              {getPowerChart()}
              {enedisAnalysisValues && isDataFullyComplete(monthDataloads) && (
                <div className="min-max">
                  <div className="container">
                    <Icon icon={MaxPowerIcon} size={40} className="minIcon" />
                    <div className="text">
                      <div className="min text-18-normal">
                        {t('special_elec.maxPower')}
                      </div>
                    </div>
                    <div className="value kvAval">
                      {enedisAnalysisValues.maxPower !== 0 &&
                      enedisAnalysisValues.maxPower !== null ? (
                        <div className="text-18-bold">
                          {enedisAnalysisValues.maxPower.toFixed(1)}
                          <span className="text-18-normal"> kVA</span>
                        </div>
                      ) : (
                        <span>----</span>
                      )}
                    </div>
                  </div>
                  <div className="container consomin">
                    <Icon icon={MinIcon} size={40} className="minIcon" />
                    <div className="text text-18-normal">
                      <div>{t('special_elec.min')}</div>
                      <div>{t('special_elec.percentage')}</div>
                      <div>{t('special_elec.price')}</div>
                    </div>
                    <div className="value">
                      {enedisAnalysisValues.minimumLoad !== 0 &&
                      enedisAnalysisValues.minimumLoad !== null ? (
                        <>
                          <div className="text-18-bold">
                            {enedisAnalysisValues.minimumLoad.toFixed(1)}
                            <span className="text-18-normal"> kWh</span>
                          </div>
                          <div className="text-18-bold">
                            {facturePercentage?.toFixed(0) || '---'}
                            <span className="text-18-normal"> %</span>
                          </div>
                          <div className="text-18-bold">
                            {elecPrice?.price
                              ? (
                                  enedisAnalysisValues.minimumLoad *
                                  elecPrice.price
                                ).toFixed(1)
                              : '---'}
                            <span className="text-18-normal"> €</span>
                          </div>
                        </>
                      ) : (
                        <span>----</span>
                      )}
                    </div>
                  </div>

                  <div onClick={toggleOpenModal} className="showmodal">
                    {t('special_elec.showModal')}
                  </div>
                </div>
              )}
            </>
          )}
        </>
      )}
      <ElecInfoModal open={openInfoModal} handleCloseClick={toggleOpenModal} />
    </div>
  )
}

export default ElecHalfHourMonthlyAnalysis