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 ModalUnlocked from 'components/CommonKit/Modal/ModalUnlocked'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'

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

const EcogestureModal: React.FC<EcogestureModalProps> = ({
  opened,
  ecogesture,
  t,
  handleCloseClick,
}: EcogestureModalProps) => {
  return (
    <>
      {!ecogesture ? (
        <></>
      ) : (
        <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-title text-24-bold ">{ecogesture.shortName}</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>
        </Modal>
      )}
    </>
  )
}

export default translate()(EcogestureModal)