import React from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { EcogestureType } from 'services/dataChallengeContracts'
import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard'
import Icon from 'cozy-ui/react/Icon'
import { getEcogestureIconSVG } from '../../CommonKit/SVG/EcogesturesSVG'

interface EcogestureCardProps {
  ecogesture: EcogestureType
  handleClick?: (ecogesture: EcogestureType) => void
  t: Function
  challengeEcogesture?: number
}

const EcogestureCard: React.FC<EcogestureCardProps> = ({
  ecogesture,
  handleClick,
  t,
  challengeEcogesture,
}: EcogestureCardProps) => {
  const handleCardclick = () => {
    handleClick && ecogesture ? handleClick(ecogesture) : null
  }

  return (
    <>
      {challengeEcogesture ? (
        <div className={`cp-eg-${challengeEcogesture}`}>
          <StyledEcogestureCard border={true} onClick={handleCardclick}>
            <div className="ec">
              <div className="ec-content ec-content-challenge">
                {ecogesture.iconName && (
                  <div>
                    <Icon
                      className="Icon"
                      icon={getEcogestureIconSVG(ecogesture.iconName)}
                      size={64}
                    />
                  </div>
                )}
                <div className="ec-content-challenge-text">
                  {ecogesture.shortName}
                </div>
              </div>
            </div>
          </StyledEcogestureCard>
        </div>
      ) : (
        <StyledEcogestureCard
          unlocked={ecogesture.unlocked ? ecogesture.unlocked : false}
          onClick={handleCardclick}
        >
          <div className="ec">
            <div
              className={`ec-content ${
                ecogesture.unlocked ? 'ec-content-unlocked' : ''
              }`}
            >
              {ecogesture.unlocked && ecogesture.iconName && (
                <div>
                  <Icon
                    className="Icon"
                    icon={getEcogestureIconSVG(ecogesture.iconName)}
                    size={50}
                  />
                </div>
              )}
              <div className="ec-content-short-name text-16-bold">
                {ecogesture.shortName}
              </div>
              <div className="ec-content-nwh">
                <span className="text-16-bold">{ecogesture.nwh}</span>
                <span className="text-16-normal"> nWh</span>
              </div>
            </div>
          </div>
        </StyledEcogestureCard>
      )}
    </>
  )
}

export default translate()(EcogestureCard)