DetailedConsumptionVisualizer.tsx

import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'services/dataConsumptionContracts'

interface DetailedConsumptionVisualizerProps {
  fluidTypes: FluidType[]
  timeStep: TimeStep
  multiFluid: boolean
  handleClickDetails: () => void
  t: Function // translation service
}
const DetailedConsumptionVisualizer = ({
  fluidTypes,
  timeStep,
  multiFluid,
  handleClickDetails,
  t,
}: DetailedConsumptionVisualizerProps) => {
  const isDetailDisplayed = () => {
    if (multiFluid) {
      return false
    } else {
      switch (fluidTypes[0]) {
        case FluidType.ELECTRICITY:
          switch (timeStep) {
            case TimeStep.YEAR:
              return true
            case TimeStep.MONTH:
              return true
            case TimeStep.DAY:
              return true
            default:
              return false
          }
        case FluidType.WATER:
        case FluidType.GAS:
          switch (timeStep) {
            case TimeStep.YEAR:
              return true
            case TimeStep.MONTH:
              return true
            default:
              return false
          }
        default:
          return false
      }
    }
  }

  return (
    <div>
      {isDetailDisplayed() && (
        <button className="cv-button" onClick={() => handleClickDetails()}>
          {t('CONSUMPTION.DISPLAY_DETAIL')}
        </button>
      )}
    </div>
  )
}

export default translate()(DetailedConsumptionVisualizer)