import React, { useContext } from "react";
import Grid from "@material-ui/core/Grid";
import RateCard from "../RateCard"
import Button from "@material-ui/core/Button";
import RatingsContext from "../../utils/RatingsContext";
import TextField from '@material-ui/core/TextField';
import useStyles from '../Styles';
import './style.css'

function RateGrid() {
    const classes = useStyles();
    const context = useContext(RatingsContext);
    return (
        <Grid container spacing={4}  >
            <RateCard field='clean' fieldName='Clean' />
            <RateCard field='affordable' fieldName='Affordable' />
            <RateCard field='atmosphere' fieldName='Atmosphere' />
            <RateCard field='food' fieldName='Food' />
           <div className="rateContainer">
           <form>
           <TextField 
                
                id="outlined-full-width"
                label="Comment"
                style={{ margin: 8 }}
                placeholder="Add a comment to your review!"
                fullWidth
                margin="normal"
                InputLabelProps={{
                    shrink: true,
                }}
                inputProps={{'data-field': 'comment'}}
                variant="outlined"
                onChange={(e)=> context.onChange(e.target.getAttribute('data-field'), e.target.value)}
            />
           </form>
           
         
           
           <button onClick={(e)=> context.onSubmit(e)}>
                SUBMIT
            </button>
           </div>
           
           
           
           
        </Grid>
    );
}

export default RateGrid;