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

import TextRotationNone from '@material-ui/icons/TextRotationNone';
import Subtitles from '@material-ui/icons/Subtitles';
import LinkIcon from '@material-ui/icons/Link';
import ImageIcon from '@material-ui/icons/Image';


const styles = theme => ({
    input: {
        position: 'relative',
    },
    button: {

    }
})

class PushParamForm extends Component {
    render() {
        const { classes } = this.props;

        return (
            <div>
                <Fragment>
                    <Typography variant="h6" gutterBottom>
                        Créer votre message
                    </Typography>
                    <Grid container spacing={24}>
                        <Grid item xs={12} md={6}>
                            <TextField 
                            value={this.props.title} InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <TextRotationNone />
                                    </InputAdornment>
                                ),
                            }}
                                required id="title" label="Titre" fullWidth onChange={(event) => this.props.onSelectedTitle(event.target.value)} />
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <TextField value={this.props.body} 
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <Subtitles />
                                    </InputAdornment>
                                ),
                            }}
                                required id="text" label="Body" fullWidth onChange={(event) => this.props.onSelectedBody(event.target.value)} />
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <TextField 
                                placeholder="https://"
                                value={this.props.action} InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <LinkIcon />
                                    </InputAdornment>
                                ),
                            }} required id="link" label="Action link" fullWidth onChange={(event) => this.props.onSelectedAction(event.target.value)} />
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <TextField
                                placeholder="https://"
                                     value={this.props.iconLink} InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <ImageIcon />
                                    </InputAdornment>
                                ),
                            }} required id="IconLink" label="Icon link" fullWidth onChange={(event) => this.props.onSelectedIconLink(event.target.value)} />
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <TextField
                                placeholder="https://"
                                value={this.props.imageLink} InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <ImageIcon />
                                    </InputAdornment>
                                ),
                            }} required id="ImageLink" label="Image link" fullWidth onChange={(event) => this.props.onSelectedImageLink(event.target.value)} />
                        </Grid>
                        {/* <Grid item xs={12} md={6}>
                            <input
                                accept="image/*"
                                className={classes.input}
                                id="contained-button-file"
                                style={{ display: 'none' }}
                                type="file"
                                accept="image/x-png,image/gif,image/jpeg"
                            />
                            <label htmlFor="contained-button-file">
                                <Button variant="contained" component="span" className={classes.button}>
                                    Upload picture
                                </Button>
                            </label>
                        </Grid> */}
                    </Grid>
                </Fragment>
            </div>
        )
    }
}

PushParamForm.propTypes = {
    onSelectedTitle: PropTypes.func.isRequired,
    onSelectedBody: PropTypes.func.isRequired,
    onSelectedAction: PropTypes.func.isRequired,
    onSelectedImageLink: PropTypes.func.isRequired,
    onSelectedIconLink: PropTypes.func.isRequired,
}

export default withStyles(styles)(PushParamForm);
