ActionCard.tsx

import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
import { useClient } from 'cozy-client'
import { UsageEventType } from 'enums'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import UsageEventService from 'services/usageEvent.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
import './actionCard.scss'

interface ActionCardProps {
  action: Ecogesture
  setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>
  setShowList: React.Dispatch<React.SetStateAction<boolean>>
}

const ActionCard = ({
  action,
  setSelectedAction,
  setShowList,
}: ActionCardProps) => {
  const [actionIcon, setActionIcon] = useState<string>('')
  const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
  const client = useClient()
  const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
  const toggleModal = useCallback(() => {
    setOpenEcogestureModal(prev => !prev)
  }, [])

  const selectEcogesture = useCallback(() => {
    setSelectedAction(action)
    setShowList(false)
    UsageEventService.addEvent(client, {
      type: UsageEventType.ACTION_CHANGE_EVENT,
      target: action.id,
      context: currentChallenge ? currentChallenge.id : '',
    })
    toggleModal()
  }, [
    setSelectedAction,
    setShowList,
    action,
    toggleModal,
    currentChallenge,
    client,
  ])

  useEffect(() => {
    async function handleEcogestureIcon() {
      const icon = await importIconById(action.id, 'ecogesture')
      setActionIcon(icon || defaultIcon)
    }
    handleEcogestureIcon()
  }, [action])

  return (
    <>
      {action && (
        <Button key={action.id} className="action-card" onClick={toggleModal}>
          <StyledIcon className="action-icon" icon={actionIcon} size={100} />
          <div className="action-title text-18-bold">{action.shortName}</div>
        </Button>
      )}
      {action && (
        <EcogestureModal
          open={openEcogestureModal}
          ecogesture={action}
          isAction={true}
          handleCloseClick={toggleModal}
          selectEcogesture={selectEcogesture}
        />
      )}
    </>
  )
}

export default ActionCard