EcogestureModal.tsx

import { Collapse } from '@material-ui/core'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useExploration from 'components/Hooks/useExploration'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
import { getPicto } from 'utils/picto'
import { importIconById } from 'utils/utils'
import EfficiencyRating from '../EfficiencyRating/EfficiencyRating'
import './ecogestureModal.scss'

interface EcogestureModalProps {
  open: boolean
  ecogesture: Ecogesture
  isAction: boolean
  handleCloseClick: () => void
  selectEcogesture?: () => void
}

const EcogestureModal = ({
  open,
  ecogesture,
  isAction,
  handleCloseClick,
  selectEcogesture,
}: EcogestureModalProps) => {
  const { t } = useI18n()
  const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
  const [ecogestureIcon, setEcogestureIcon] = useState('')
  const [showDetails, setShowDetails] = useState(false)

  const [, setValidExploration] = useExploration()

  useEffect(() => {
    async function handleEcogestureIcon() {
      const icon = await importIconById(ecogesture.id, 'ecogesture')
      setEcogestureIcon(icon || defaultIcon)
      if (currentChallenge?.exploration.ecogesture_id === ecogesture._id) {
        setValidExploration(currentChallenge.exploration.id)
      }
    }
    if (ecogesture) {
      handleEcogestureIcon()
    }
  }, [ecogesture, setValidExploration, currentChallenge])

  return (
    <Dialog
      open={open}
      onClose={handleCloseClick}
      aria-labelledby="accessibility-title"
      classes={{
        root: 'modal-root',
        paper: 'modal-paper no-padding blue-border',
      }}
    >
      <div id="accessibility-title">
        {isAction
          ? t('ecogesture_modal.accessibility.window_title_action')
          : t('ecogesture_modal.accessibility.window_title_ecogesture')}
      </div>
      <IconButton
        aria-label={t('ecogesture_modal.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="em-header text-14-normal-uppercase">
        {isAction
          ? t('ecogesture_modal.title_action')
          : t('ecogesture_modal.title_ecogesture')}
      </div>

      <div className="em-root ecogesture-modal">
        <div className="em-content">
          <div className="em-content-box-img">
            {ecogestureIcon && (
              <StyledIcon className="icon" icon={ecogestureIcon} size={140} />
            )}
          </div>
          <div className="em-title text-24-bold ">{ecogesture.shortName}</div>
          <div className="em-detail">
            <div className="em-detail-efficiency">
              <span className="em-efficiency">
                {t('ecogesture_modal.efficiency')}
              </span>
              <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
            </div>
            <div className="em-picto-flow">
              {ecogesture.fluidTypes.map((fluid, index) => (
                <div key={index}>
                  <StyledIcon
                    className="em-pic-content"
                    icon={getPicto(fluid)}
                    size={25}
                  />
                </div>
              ))}
            </div>
          </div>
          <div className="text-16-bold long-name">{ecogesture.longName}</div>
          {isAction ? (
            <Button
              aria-label={t(
                'ecogesture_modal.accessibility.button_select_action'
              )}
              classes={{
                root: 'btn-action-launch',
                label: 'text-16-bold',
              }}
              onClick={selectEcogesture}
            >
              {t('ecogesture_modal.select_action')}
            </Button>
          ) : (
            <>
              <Collapse in={showDetails}>
                <div className="em-description text-16-normal-150">
                  {ecogesture.longDescription}
                </div>
              </Collapse>
              <Button
                aria-label={t(
                  'ecogesture_modal.accessibility.button_see_more_detail'
                )}
                onClick={() => setShowDetails(prev => !prev)}
                classes={{
                  root: 'btn-secondary-negative',
                  label: 'text-14-normal',
                }}
              >
                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
              </Button>
            </>
          )}
        </div>
      </div>
    </Dialog>
  )
}

export default EcogestureModal