import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { IconButton } from '@material-ui/core';
import FavoriteIcon from '@material-ui/icons/Favorite';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import NextLink from 'next/link';
import LinesEllipsis from 'react-lines-ellipsis';
import ChoicesBox from './ChoicesBox';

const styles = theme => ({
  card: {
    maxWidth: '100%',
    maxHeight: 300,
    marginBottom: theme.spacing.unit * 2,
  },
  [theme.breakpoints.up('sm')]: {
    card: {
      maxWidth: '49%',
    },
  },
  [theme.breakpoints.up('md')]: {
    card: {
      maxWidth: '32%',
    },
  },
  iconButton: {
    padding: 8,
  },
  media: {
    height: 140,
  },
});

const ListItem = props => {
  const { classes, question } = props;
  const noImageNoChoices = !question.imageUrl && question.choices && question.choices.length === 0;
  return (
    <Card className={classes.card}>
      <NextLink href={`/admin/questao?id=${question.id}`}>
        <CardActionArea>
          <CardContent>
            <Typography component="div">
              <LinesEllipsis
                text={question.wording}
                maxLine={noImageNoChoices ? 9 : 4}
                ellipsis="..."
                trimRight
                basedOn="words"
              />
            </Typography>
            {!question.imageFullUrl &&
              question.choices &&
              question.choices.length > 0 && <ChoicesBox choices={question.choices} dense />}
          </CardContent>
          {question.imageFullUrl && (
            <CardMedia className={classes.media} image={question.imageFullUrl} />
          )}
        </CardActionArea>
      </NextLink>
      <CardActions>
        <IconButton className={classes.iconButton} aria-label="Add to favorites">
          <FavoriteIcon fontSize="small" />
        </IconButton>
        <IconButton className={classes.iconButton} aria-label="Add to favorites">
          <CheckCircleIcon fontSize="small" />
        </IconButton>
      </CardActions>
    </Card>
  );
};

ListItem.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ListItem);

@@ -729,16 +729,74 @@
 sBox';%0A%0A
+const longWordingLines = 9;%0Aconst shortWordingLines = 4;%0A%0A
 const st
@@ -814,16 +814,16 @@
 e =%3E (%7B%0A
-
   card: 
@@ -1075,16 +1075,307 @@
 %7D,%0A  %7D,%0A
+  shortWording: %7B%0A    // Fixa a altura pro texto n%C3%A3o deslocar a imagem antes de ser%0A    // 'podado' pelo %3CLinesEllipsis /%3E%0A    height: 21 * shortWordingLines,%0A    overflow: 'hidden',%0A  %7D,%0A  longWording: %7B%0A    // 21px por linha%0A    height: 21 * longWordingLines,%0A    overflow: 'hidden',%0A  %7D,%0A
   iconBu
@@ -1608,16 +1608,103 @@
  === 0;%0A
+  const wordingClass = noImageNoChoices ? classes.longWording : classes.shortWording;%0A%0A
   return
@@ -1889,16 +1889,41 @@
 nt=%22div%22
+ className=%7BwordingClass%7D
 %3E%0A      
@@ -2033,13 +2033,44 @@
 s ? 
-9 : 4
+longWordingLines : shortWordingLines
 %7D%0A  

Fix wording height in QuestionListItem