FluidButton.tsx

import { IconButton } from '@material-ui/core'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidState, FluidType } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import { getNavPicto } from 'utils/picto'
import { getFluidName, isKonnectorActive } from 'utils/utils'

interface FluidButtonProps {
  fluidType: FluidType
  isActive: boolean
}

const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
  const { t } = useI18n()
  const navigate = useNavigate()
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const [showError, setShowError] = useState<boolean>(false)
  const isMulti = fluidType === FluidType.MULTIFLUID
  const fluidName = getFluidName(fluidType)

  const isConnected = useCallback(() => {
    if (isMulti) return true
    return isKonnectorActive(fluidStatus, fluidType)
  }, [fluidStatus, fluidType, isMulti])

  const isErrored = useCallback(() => {
    if (
      (!isMulti && fluidStatus[fluidType].status === FluidState.ERROR) ||
      (fluidType !== FluidType.WATER &&
        fluidStatus[fluidType].status === FluidState.LOGIN_FAILED)
    ) {
      return true
    }
    return false
  }, [fluidStatus, fluidType, isMulti])

  const iconType = getNavPicto(fluidType, isActive, isConnected())

  const goToFluid = useCallback(async () => {
    navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`)
  }, [navigate, isMulti, fluidName])

  const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance

  useEffect(() => {
    // Show errors only on connected konnectors that are in error, outdated, with no data (specific case), and not in multifluid
    if (!isMulti && isConnected() && isErrored()) {
      setShowError(true)
    }
  }, [fluidStatus, fluidType, isConnected, isErrored, isMulti])

  return (
    <IconButton className="fluid-title fluid-button" onClick={goToFluid}>
      <StyledIcon
        className="fluid-icon"
        icon={iconType}
        size={fluidType === FluidType.MULTIFLUID ? 36 : 32}
      />
      {isFluidMaintenance() ? (
        <StyledIcon
          icon={PartnerIssueNotif}
          size={22}
          className="notif-error"
        />
      ) : (
        showError && (
          <StyledIcon icon={ErrorNotif} size={22} className="notif-error" />
        )
      )}
      <div
        className={classNames('fluid-title text-14-normal', {
          active: isActive,
        })}
      >
        {t(`FLUID.${fluidName.toLocaleUpperCase()}.LABEL`)}
      </div>
    </IconButton>
  )
}

export default FluidButton