FluidButton.tsx

import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidState, FluidType, UsageEventType } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
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 client = useClient()
  const navigate = useNavigate()
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const [showError, setShowError] = useState<boolean>(false)

  const isConnected = useCallback(() => {
    if (fluidType === FluidType.MULTIFLUID) {
      return true
    } else return isKonnectorActive(fluidStatus, fluidType)
  }, [fluidStatus, fluidType])

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

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

  const goToFluid = useCallback(async () => {
    await UsageEventService.addEvent(client, {
      type: UsageEventType.NAVIGATION_EVENT,
      target: getFluidName(fluidType),
    })
    navigate(
      fluidType === FluidType.MULTIFLUID
        ? '/consumption'
        : `/consumption/${getFluidName(fluidType)}`
    )
  }, [navigate, fluidType, client])

  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 (fluidType !== FluidType.MULTIFLUID && isConnected() && isErrored()) {
      setShowError(true)
    }
  }, [fluidStatus, fluidType, isConnected, isErrored])
  return (
    <div
      className={`fluid-title ${FluidType[
        fluidType
      ].toLowerCase()} 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={`fluid-title ${getFluidName(fluidType)} ${
          isActive && 'active'
        } text-14-normal`}
      >
        {t(`FLUID.${FluidType[fluidType]}.LABEL`)}
      </div>
    </div>
  )
}

export default FluidButton