import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Collapse from '@material-ui/core/Collapse';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { red } from '@material-ui/core/colors';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'

const useStyles = makeStyles(theme => ({
  card: {
    width: '100%',
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
    width: '0.7em',
    height: '0.7em',
    fill: theme.palette.primary.dark,
  },
  expandOpen: {
    transform: 'rotate(180deg)',
    width: '0.7em',
    height: '0.7em',
    fill: theme.palette.primary.dark,
  },
  rootCard: {
    boxShadow: 'none !important',
  },
  rootCardAction: {
    margin: theme.spacing(1,0),
    '& button': {
      padding: theme.spacing(2,0),
      borderRadius: 0,
    }
  },
  rootCardContent: {
    padding: 0 + '!important',
  },
  containerCollapse: {
    position: 'relative',
    '&:before': {
      position: 'absolute',
      bottom: 0,
      height: '100%',
      width: '100%',
      content: '""',
      background: 'linear-gradient(to top,rgba(255, 255, 255, 1) 8%, rgba(255, 255, 255, 0) 50%)',
      pointerEvents: 'none',
    },
  },
  containerCollapseDefault: {
    position: 'relative',
    '&:before': {
      position: 'absolute',
      bottom: 0,
      height: '100%',
      width: '100%',
      content: '""',
      background: ' rgba(255, 255, 255, 0)',
      pointerEvents: 'none',
    },
  },
  displayMore: {
      color: theme.palette.primary.dark,
      fontWeight: '600',
      fontSize: '0.8rem',

  },







}));

export default function SimpleCollapse(props) {
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(true);

  function handleExpandClick() {
    setExpanded(!expanded);
  }

  return (
    <Card className={classes.card} classes={{ root: classes.rootCard }}>
      <Collapse in={expanded} timeout="auto" collapsedHeight={isWidthUp('sm', props.width) ? '28vh' : '30vh'} className={clsx(classes.containerCollapse, {
            [classes.containerCollapseDefault]: expanded,
          })}>
        <CardContent classes={{ root: classes.rootCardContent }}>
          {props.children}
        </CardContent>
      </Collapse>

      <CardActions disableSpacing classes={{ root: classes.rootCardAction }}>
        <IconButton
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="Afficher plus "
        > <Typography className={classes.displayMore}>
            {(!expanded) ? 'Afficher plus' : 'Afficher moins'}
          </Typography>
          <ExpandMoreIcon className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })} />
        </IconButton>

      </CardActions>
    </Card>
  );
}