InfoDataConsumptionVisualizer.tsx

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

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

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

  const toggleNoDataModal = useCallback(() => {
    setOpenNoDataModal(prev => !prev)
  }, [])

  if (!dataload) {
    return <></>
  }

  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}>
        {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={toggleNoDataModal}>
          <span className="text-16-normal underlined-error">
            {t('consumption_visualizer.why_no_data')}
          </span>
        </Button>
        <NoDataModal
          open={openNoDataModal}
          handleCloseClick={toggleNoDataModal}
        />
      </>
    )
  }

  return <></>
}

export default InfoDataConsumptionVisualizer