import React, { Component, Fragment } from 'react'
import withStyles from '@material-ui/core/styles/withStyles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';

const styles = theme => ({
    title: {
        position: 'relative',
    },
    maxImageSize:
    {
        maxWidth:'540px',
        maxHeight:'180px'
    }

})

class PushReview extends Component {
    render() {
        const { classes } = this.props;
        return (
            <Fragment>
                <Grid container spacing={16}>
                    <Grid item xs={12} sm={6}>
                        <Typography variant="h6" gutterBottom className={classes.title}>
                            Prêt à envoyer
                        </Typography> <Typography variant="h6" gutterBottom className={classes.title}>
                            {this.props.target === 'a' ? "A moi" : "A tous les inscrits"}
                        </Typography>
                    </Grid>
                    <Grid item container direction="column" xs={12} sm={12}>
                       
                        <Grid container>
                            <Grid item xs={12} md={6}>
                                <Typography variant="h6" gutterBottom className={classes.title}>
                                    {this.props.title}
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Typography variant="h6" gutterBottom className={classes.title}>
                                    {this.props.body}
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <Typography variant="h6" gutterBottom className={classes.title}>
                                    {this.props.action}
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12}>
                                <img src={this.props.iconLink} alt="icon" className={classes.maxImageSize}></img>
                            </Grid>
                                
                            <Grid item xs={12} md={6}>
                                <img src={this.props.imageLink} alt="image" className={classes.maxImageSize}></img>
                            </Grid>
                            
                        </Grid>
                    </Grid>
                </Grid>
            </Fragment>
        )
    }
}

export default withStyles(styles)(PushReview);

