import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
import IconButton from '@material-ui/core/IconButton';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const useStyles = makeStyles(theme => ({
  paper: {
    padding: theme.spacing(3),
    width: theme.spacing(100),
    height: theme.spacing(16),
    margin: theme.spacing(2)
  },
  questionsGrid: {
    marginBottom: '20px'
  },
}));

function FormFieldSelect(props) {
  const classes = useStyles();

  return (
    <Paper className={classes.paper}>
      <Grid container>
        <Grid item xs={12} className={classes.questionsGrid}>
          <TextField value={props.question} label="sua pergunta" onChange={e => props.setTextField(e.target.value, props.idq)}/>
        </Grid>
        <Grid item xs={11} className={classes.questionsGrid}>
        <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            // value={age}
            // onChange={handleChange}
        >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        </Grid>
        <Grid item xs={1}>
          <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
            <DeleteOutlinedIcon />
          </IconButton>
        </Grid>
      </Grid>
    </Paper>
  );

}

export default FormFieldSelect;

{/* <InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    onChange={handleChange}
>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
</Select> */}