DataloadSectionDetail.tsx

import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import {
  DataloadSectionType,
  DataloadState,
  FluidType,
  UsageEventType,
} from 'enums'
import { Dataload } from 'models'
import React, { useCallback } from 'react'
import { NavLink } from 'react-router-dom'
import ConverterService from 'services/converter.service'
import UsageEventService from 'services/usageEvent.service'
import { getNavPicto } from 'utils/picto'
import { formatNumberValues, getFluidName } from 'utils/utils'

interface DataloadSectionDetailProps {
  dataload: Dataload
  fluidType: FluidType
  dataloadSectionType: DataloadSectionType
}

const DataloadSectionDetail = ({
  dataload,
  fluidType,
  dataloadSectionType,
}: DataloadSectionDetailProps) => {
  const client = useClient()
  const { t } = useI18n()
  const converterService = new ConverterService()

  const emitNavEvent = useCallback(
    async (targetPage: string) => {
      await UsageEventService.addEvent(client, {
        type: UsageEventType.NAVIGATION_EVENT,
        target: targetPage,
      })
    },
    [client]
  )

  if (fluidType !== FluidType.MULTIFLUID) {
    return (
      <div
        className={classNames('dataloadvisualizer-euro text-16-normal', {
          [`${getFluidName(fluidType)}`]:
            dataloadSectionType !== DataloadSectionType.LEFT,
          [`${getFluidName(fluidType)}-compare`]:
            dataloadSectionType === DataloadSectionType.LEFT,
        })}
      >
        {`${formatNumberValues(
          converterService.LoadToEuro(
            dataload.value,
            fluidType,
            dataload.price ? dataload.price : null
          )
        )} €`}
      </div>
    )
  }

  if (
    fluidType === FluidType.MULTIFLUID &&
    dataloadSectionType !== DataloadSectionType.NO_COMPARE
  ) {
    return <div className="dataloadvisualizer-euro text-16-normal" />
  }

  if (
    fluidType === FluidType.MULTIFLUID &&
    dataloadSectionType === DataloadSectionType.NO_COMPARE &&
    dataload.valueDetail
  ) {
    return (
      <div className="dataloadvisualizer-euro text-16-normal">
        {dataload.valueDetail.map((valueDetail, index) => {
          return (
            <NavLink
              key={index}
              to={`/consumption/${FluidType[index].toLowerCase()}`}
              className="dataloadvisualizer-euro-link"
            >
              <div
                className={classNames('dataloadvisualizer-euro-fluid', {
                  [` ${FluidType[index].toLowerCase()}`]:
                    valueDetail.state === DataloadState.VALID ||
                    valueDetail.state === DataloadState.UPCOMING ||
                    valueDetail.state === DataloadState.COMING ||
                    valueDetail.state === DataloadState.EMPTY ||
                    valueDetail.state === DataloadState.HOLE,
                  [` error`]: valueDetail.state === DataloadState.MISSING,
                })}
                onClick={() => emitNavEvent(FluidType[index].toLowerCase())}
              >
                <Icon
                  className="dataloadvisualizer-euro-fluid-icon"
                  icon={getNavPicto(index, true, true)}
                  size={22}
                />
                <div>
                  {valueDetail.state === DataloadState.VALID &&
                    `${formatNumberValues(valueDetail.value)} €`}
                  {(valueDetail.state === DataloadState.UPCOMING ||
                    valueDetail.state === DataloadState.COMING) &&
                    t('consumption_visualizer.data_to_come')}
                  {(valueDetail.state === DataloadState.EMPTY ||
                    valueDetail.state === DataloadState.HOLE) &&
                    t('consumption_visualizer.data_empty')}
                  {valueDetail.state === DataloadState.MISSING &&
                    t('consumption_visualizer.aie')}
                </div>
              </div>
            </NavLink>
          )
        })}
      </div>
    )
  }
  return (
    <div className="dataloadvisualizer-euro text-16-normal">
      <NavLink
        to={`/consumption/${getFluidName(fluidType)}`}
        className="dataloadvisualizer-euro-link"
      >
        <div
          className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
        >
          <Icon
            className="dataloadvisualizer-euro-fluid-icon"
            icon={getNavPicto(fluidType, true, true)}
            size={22}
          />
          <div>{`${formatNumberValues(
            converterService.LoadToEuro(
              dataload.value,
              fluidType,
              dataload.price ? dataload.price : null
            )
          )} €`}</div>
        </div>
      </NavLink>
    </div>
  )
}

export default DataloadSectionDetail