InfoDataConsumptionVisualizer.tsx

import { Button } from '@material-ui/core'
import { useMoveToLatestDate } from 'components/Hooks/useMoveToDate'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { DataloadState, FluidType } from 'enums'
import { DateTime } from 'luxon'
import { Dataload } from 'models'
import React, { useState } from 'react'
import NoDataModal from './NoDataModal'
import './infoDataConsumptionVisualizer.scss'

interface InfoDataConsumptionVisualizerProps {
  dataload: Dataload
  fluidType: FluidType
  lastDataDate: DateTime | null
  focusable?: boolean
}

const InfoDataConsumptionVisualizer = ({
  dataload,
  fluidType,
  lastDataDate,
  focusable,
}: InfoDataConsumptionVisualizerProps) => {
  const { t } = useI18n()
  const [openNoDataModal, setOpenNoDataModal] = useState<boolean>(false)
  const { moveToLatestDate } = useMoveToLatestDate(lastDataDate)

  if (!dataload) {
    return null
  }

  if (
    dataload.state === DataloadState.MISSING ||
    dataload.state === DataloadState.UPCOMING ||
    dataload.state === DataloadState.COMING ||
    dataload.state === DataloadState.AGGREGATED_HOLE_OR_MISSING ||
    dataload.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING ||
    dataload.state === DataloadState.AGGREGATED_COMING
  ) {
    const lastDate = lastDataDate ? lastDataDate.toFormat("dd'/'MM'/'yy") : '-'
    const key =
      fluidType === FluidType.MULTIFLUID
        ? 'last_valid_data_multi'
        : 'last_available_data'
    return (
      <Button
        className="btnText"
        onClick={moveToLatestDate}
        tabIndex={focusable ? 0 : -1}
      >
        {t(`consumption_visualizer.${key}`, {
          date: lastDate,
        })}
      </Button>
    )
  }

  if (
    dataload.state === DataloadState.EMPTY ||
    dataload.state === DataloadState.HOLE ||
    dataload.state === DataloadState.AGGREGATED_EMPTY
  ) {
    return (
      <>
        <Button
          className="btnText"
          onClick={() => setOpenNoDataModal(true)}
          tabIndex={focusable ? 0 : -1}
        >
          <span className="text-16-normal underlined-error">
            {t('consumption_visualizer.why_no_data')}
          </span>
        </Button>
        <NoDataModal
          open={openNoDataModal}
          handleCloseClick={() => setOpenNoDataModal(false)}
        />
      </>
    )
  }

  return null
}

export default InfoDataConsumptionVisualizer