ElecHalfHourMonthlyAnalysis.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 MinIcon from 'assets/icons/ico/minimum.svg'
import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
import IconButton from '@material-ui/core/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enum/fluid.enum'
import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
import { UserExplorationID } from 'enum/userExploration.enum'
import { getNavPicto } from 'utils/picto'
import { DateTime } from 'luxon'
import { useClient } from 'cozy-client'
import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
import ConsumptionService from 'services/consumption.service'
import {
  AggregatedEnedisMonthlyDataloads,
  EnedisMonthlyAnalysisData,
} from 'models/enedisMonthlyAnalysis'
import ElecHalfHourChart from 'components/Analysis/ElecHalfHourChart'
import './elecHalfHourMonthlyAnalysis.scss'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import { TimeStep } from 'enum/timeStep.enum'
import { Button } from '@material-ui/core'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { FluidConfig, FluidPrice, PerformanceIndicator } from 'models'
import ConfigService from 'services/fluidConfig.service'
import ElecInfoModal from './ElecInfoModal'
import FluidPricesService from 'services/fluidsPrices.service'

interface ElecHalfHourMonthlyAnalysisProps {
  analysisDate: DateTime
  perfIndicator: PerformanceIndicator
}

const ElecHalfHourMonthlyAnalysis: React.FC<ElecHalfHourMonthlyAnalysisProps> = ({
  analysisDate,
  perfIndicator,
}: ElecHalfHourMonthlyAnalysisProps) => {
  const { t } = useI18n()
  const client = useClient()
  const fluidConfig: Array<FluidConfig> = new ConfigService().getFluidConfig()
  const [, setValidExploration] = useExploration()
  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 getPowerChart = useCallback((): JSX.Element => {
    if (
      monthDataloads &&
      monthDataloads.weekend &&
      monthDataloads.week &&
      monthDataloads.weekend[0] !== null &&
      monthDataloads.week[0] !== null
    ) {
      return (
        <ElecHalfHourChart
          dataLoad={isWeekend ? monthDataloads.weekend : monthDataloads.week}
          isWeekend={isWeekend}
        />
      )
    } else {
      return <p className={`text-20-bold no_data`}>{t('analysis.no_data')}</p>
    }
  }, [isWeekend, monthDataloads, t])

  useEffect(() => {
    let subscribed = true
    async function getEnedisAnalysisData() {
      const cs = new ConsumptionService(client)
      const activateHalfHourLoad = await cs.checkDoctypeEntries(
        FluidType.ELECTRICITY,
        TimeStep.HALF_AN_HOUR
      )
      if (subscribed) {
        if (activateHalfHourLoad) {
          const emas = new EnedisMonthlyAnalysisDataService(client)
          const aggegatedDate = analysisDate.minus({ month: 1 })
          const data: EnedisMonthlyAnalysisData[] = await emas.getEnedisMonthlyAnalysisByDate(
            aggegatedDate.year,
            aggegatedDate.month
          )
          if (subscribed && data && data.length) {
            const aggregatedData = emas.aggregateValuesToDataLoad(data[0])
            setenedisAnalysisValues(data[0])
            setMonthDataloads(aggregatedData)
            if (data[0].minimumLoad && perfIndicator.value && subscribed) {
              const percentage =
                (data[0].minimumLoad / perfIndicator.value) * 100
              setFacturePercentage(percentage)
            }
          }
        } else {
          setisHalfHourActivated(false)
        }
        setisLoading(false)
      }
    }
    getEnedisAnalysisData()

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

  useEffect(() => {
    let subscribed = true
    const fluidsPricesService = new FluidPricesService(client)
    async function getAllLastPrices() {
      const price: FluidPrice = await fluidsPricesService.getPrices(
        FluidType.ELECTRICITY,
        analysisDate.minus({ month: 1 })
      )
      if (subscribed && price) {
        setElecPrice(price)
      }
    }
    getAllLastPrices()
    return () => {
      subscribed = false
    }
  }, [analysisDate, 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="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={RigthArrowIcon} size={24} />
            </IconButton>
          </div>
          {!isLoading ? (
            <>
              {getPowerChart()}
              {enedisAnalysisValues && (
                <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
                              ? facturePercentage.toFixed(0)
                              : '---'}
                            <span className="text-18-normal"> %</span>
                          </div>
                          <div className="text-18-bold">
                            {elecPrice && 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>
              )}
            </>
          ) : (
            <div className="loader-container">
              <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
            </div>
          )}
        </>
      ) : (
        <>
          <div className="activation-text text-18-normal">
            {t(`timestep.activate.enedis.no_consent_active.text_analysis`)}
          </div>
          <Button
            aria-label={t(
              `timestep.activate.enedis.no_consent_active.accessibility.button_activate`
            )}
            onClick={() => {
              setValidExploration(UserExplorationID.EXPLORATION004)
              window.open(fluidConfig[0].konnectorConfig.activation, '_blank')
            }}
            classes={{
              root: 'btn-highlight',
              label: 'text-16-bold',
            }}
          >
            <div className="oauthform-button-content">
              <div className="oauthform-button-content-icon">
                <StyledIcon icon={iconEnedisLogo} size={48} />
              </div>
              <div className="oauthform-button-text text-18-bold">
                <div>
                  {t(
                    `timestep.activate.enedis.no_consent_active.accessibility.button_activate`
                  )}
                </div>
              </div>
            </div>
          </Button>
        </>
      )}
      <ElecInfoModal open={openInfoModal} handleCloseClick={toggleOpenModal} />
    </div>
  )
}

export default ElecHalfHourMonthlyAnalysis