import React from 'react'; import RateReviewIcon from '@material-ui/icons/RateReview'; import style from "../LandingPage.module.css"; import IconButton from "@material-ui/core/IconButton"; import Dialog from "@material-ui/core/Dialog"; import DialogTitle from "@material-ui/core/DialogTitle"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import TextField from '@material-ui/core/TextField'; import Typography from '@material-ui/core/Typography'; import Button from "@material-ui/core/Button"; import {makeStyles} from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import {Rating} from '@material-ui/lab'; const ReviewPopupButton = ({restaurant}) => { const [open, setOpen] = React.useState(false); const restaurantName = restaurant.Name; const restaurantId = restaurant.ID; // Show popup const handleClickOpen = (e) => { // Prevent click from propagating to restaurant card and going straight to booking e.stopPropagation(); setOpen(true); } // Hide popup const handleClose = (e) => { // Prevent click from propagating to restaurant card when exiting popup e.stopPropagation(); setOpen(false); }; const handlePopupClick = (e) => { e.stopPropagation(); } const labels = { 0.5: 'Useless', 1: 'Very poor', 1.5: 'Poor', 2: 'Below average', 2.5: 'Average', 3: 'Above average', 3.5: 'Good', 4: 'Great', 4.5: 'Excellent', 5: 'Outstanding', }; const useStyles = makeStyles({ root: { width: 400, display: 'flex', alignItems: 'center', }, }); const [value, setValue] = React.useState(2); const [hover, setHover] = React.useState(-1); const classes = useStyles(); return ( <> <IconButton className={style.reviewButton} onClick={handleClickOpen}> <RateReviewIcon className={style.reviewIcon}/> </IconButton> <Dialog open={open} onClose={handleClose} onClick={handlePopupClick} > <DialogTitle className={style.reviewPopup}> <Typography className={style.reviewPopup}> {restaurantName}'s Reviews <DialogContent> <TextField autoFocus margin="dense" id="name" type="name" label="Name" fullWidth /> <div className={classes.root}> <Rating name="hover-feedback" value={value} precision={0.5} onChange={(event, newValue) => { setValue(newValue); }} onChangeActive={(event, newHover) => { setHover(newHover); }} /> {value !== null && <Box ml={1}>{labels[hover !== -1 ? hover : value]}</Box>} </div> <DialogContentText> Please submit any comments here </DialogContentText> <TextField multiline rows = "4" autoFocus margin="dense" id="review" type="review" fullWidth /> </DialogContent> </Typography> </DialogTitle> <div className={style.reviewButtonsContainer}> <Button variant="outlined" className={style.primaryButton} onClick={handleClose}>Cancel</Button> <Button variant="outlined" className={style.secondaryButton} onClick={handleClose}>Submit</Button> </div> </Dialog> </> ); } export default ReviewPopupButton