StyledIconCard.tsx

import React, { ReactNode } from 'react'
import CardActionArea, {
  CardActionAreaProps,
} from '@material-ui/core/CardActionArea'
import CardContent from '@material-ui/core/CardContent'
import { withStyles } from '@material-ui/core/styles'
import { FluidType } from 'enum/fluid.enum'
import { getPicto } from 'utils/utils'
import Icon from 'cozy-ui/react/Icon'
import Grid from '@material-ui/core/Grid'

const CardBase = withStyles({
  root: {
    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
    border: '1px solid',
    boxSizing: 'border-box',
    boxShadow: '0px 4px 16px',
    borderRadius: '4px',
    display: 'inline',
    margin: '0',
  },
})(CardActionArea)

const CardElec = withStyles({
  root: {
    border: '1px solid var(--elecColor)',
  },
})(CardBase)

const CardWater = withStyles({
  root: {
    border: '1px solid var(--waterColor)',
  },
})(CardBase)

const CardGas = withStyles({
  root: {
    border: '1px solid var(--gasColor)',
  },
})(CardBase)

const CardContentBase = withStyles({
  root: {
    color: 'white',
  },
})(CardContent)

interface StyledIconCardProps extends CardActionAreaProps {
  fluidType: FluidType
}

const GenerateContentCard = (
  fluidType: FluidType,
  children: ReactNode
): React.ReactFragment => {
  const icon = getPicto(fluidType)

  return (
    <CardContentBase>
      <Grid
        container
        spacing={8}
        direction="column"
        alignItems="center"
        justify="center"
      >
        <Grid item>
          <Icon icon={icon} size={64} />
        </Grid>
        <Grid item>{children}</Grid>
      </Grid>
    </CardContentBase>
  )
}

const StyledIconCard: React.ComponentType<StyledIconCardProps> = ({
  fluidType,
  ...props
}: StyledIconCardProps) => {
  switch (fluidType) {
    case FluidType.ELECTRICITY:
      return (
        <CardElec {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardElec>
      )
    case FluidType.WATER:
      return (
        <CardWater {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardWater>
      )
    case FluidType.GAS:
      return (
        <CardGas {...props}>
          {GenerateContentCard(fluidType, props.children)}
        </CardGas>
      )
    default:
      return (
        <CardBase {...props}>
          <CardContentBase>
            <Grid container spacing={8} alignItems="center" justify="center">
              <Grid item>{props.children}</Grid>
            </Grid>
          </CardContentBase>
        </CardBase>
      )
  }
}

export default StyledIconCard