ActionBegin.tsx

import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import ActionModal from 'components/Action/ActionModal/ActionModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { Ecogesture, UserChallenge } from 'models'
import React, { useCallback, useEffect, useState } from 'react'
import ActionService from 'services/action.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
import './actionBegin.scss'

interface ActionBeginProps {
  action?: Ecogesture
  setShowList: React.Dispatch<React.SetStateAction<boolean>>
  userChallenge: UserChallenge
}

const ActionBegin = ({
  action,
  setShowList,
  userChallenge,
}: ActionBeginProps) => {
  const client: Client = useClient()
  const { t } = useI18n()
  const {
    global: { fluidTypes },
    profile: { isProfileTypeCompleted },
  } = useAppSelector(state => state.ecolyo)
  const [currentAction, setCurrentAction] = useState<Ecogesture>()
  const [actionIcon, setActionIcon] = useState<string>('')
  const [openLaunchModal, setOpenLaunchModal] = useState<boolean>(false)

  const toggleLaunchModal = useCallback(() => {
    setOpenLaunchModal(prev => !prev)
  }, [])

  useEffect(() => {
    let subscribed = true
    const getAction = async () => {
      if (action) {
        if (subscribed) setCurrentAction(action)
      } else {
        const actionService = new ActionService(client)
        let actions: Ecogesture[] = []
        if (isProfileTypeCompleted) {
          actions = await actionService.getCustomActions(fluidTypes)
        } else {
          actions = await actionService.getDefaultActions()
        }
        if (subscribed) {
          setCurrentAction(actions[0])
        }
      }
    }
    getAction()
    return () => {
      subscribed = false
    }
  }, [client, isProfileTypeCompleted, fluidTypes, action, currentAction])

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

  return (
    <div className="action-begin">
      {currentAction && (
        <div className="action-container">
          <div className="action-begin-container">
            <div className="icon-container">
              <StyledIcon
                className="action-icon"
                icon={actionIcon}
                size={100}
              />
            </div>
            <StarsContainer
              result={userChallenge.progress.actionProgress}
              isQuizBegin={true}
            />
            <div className="action-title text-20-bold">
              {currentAction.shortName}
            </div>
            <div className="action-duration text-18">
              {t('action.duration', {
                smartCount: currentAction.actionDuration,
              })}
            </div>
            <div className="action-text text-18-bold">
              {currentAction.actionName}
            </div>
            <div className="action-buttons">
              <Button
                onClick={toggleLaunchModal}
                classes={{
                  root: 'btn-secondary-negative',
                  label: 'text-16-normal',
                }}
              >
                {t('action.apply')}
              </Button>
              <Button
                onClick={() => setShowList(true)}
                classes={{
                  root: 'btn-secondary-negative',
                  label: 'text-16-normal',
                }}
              >
                {t('action.other')}
              </Button>
            </div>
          </div>
          <ActionModal
            open={openLaunchModal}
            action={currentAction}
            handleCloseClick={toggleLaunchModal}
            userChallenge={userChallenge}
          />
        </div>
      )}
    </div>
  )
}

export default ActionBegin