EcogestureModal.tsx

import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import { getPicto } from 'utils/utils'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Icon from 'cozy-ui/react/Icon'
import { getEcogestureIconSVG } from 'components/CommonKit/SVG/EcogesturesSVG'

interface EcogestureModalProps {
  opened: boolean
  ecogesture: EcogestureType
  t: Function
  handleCloseClick: () => void
  handleStartClick: () => void
}

const EcogestureModal: React.FC<EcogestureModalProps> = ({
  opened,
  ecogesture,
  t,
  handleCloseClick,
}: EcogestureModalProps) => {
  return (
    <>
      {!ecogesture ? null : (
        <Modal
          open={opened}
          border={ecogesture.unlocked}
          handleCloseClick={handleCloseClick}
        >
          <div className="em-header text-14-normal-uppercase">
            {t('ECOGESTURE.TITLE_ECOGESTURE')}
          </div>
          <div className="em-content-box">
            <div className="em-content-box-text">
              <div className="em-content-box-text-header">
                {ecogesture.iconName !== '' && ecogesture.unlocked && (
                  <div>
                    <Icon
                      className="icon"
                      icon={getEcogestureIconSVG(ecogesture.iconName)}
                      size={100}
                    />
                  </div>
                )}
                <div className="em-title text-24-bold ">
                  {ecogesture.shortName}
                </div>
              </div>
              <div className="em-detail">
                <div className="em-detail-nwh">
                  <span className="text-16-bold">{ecogesture.nwh} </span>
                  <span className="em-detail-nwh-unit text-16-normal">nWh</span>
                </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="em-description text-16-normal-150">
                {ecogesture.longDescription}
              </div>
            </div>
          </div>
        </Modal>
      )}
    </>
  )
}

export default translate()(EcogestureModal)