import { useState } from 'react';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

function Rsvp() {
  const [guestList, setGuestList] = useState([]);

  const onAddBtnClick = event => {
    setGuestList(guestList.concat(
      <Grid container spacing={2}>
        <Grid item xs={6} md={6} lg={6}>
          <TextField key={guestList.length} label="Name" variant="outlined" />
        </Grid>
        <Grid item xs={6} md={6} lg={6}>
          <FormControl>
            <FormLabel>Meal Preference</FormLabel>
            <RadioGroup>
              <FormControlLabel
                value="Beef"
                control={<Radio />}
                label="Beef"
              />
              <FormControlLabel
                value="Chicken"
                control={<Radio />}
                label="Chicken"
              />
              <FormControlLabel
                value="Fish"
                control={<Radio />}
                label="Fish"
              />
              <FormControlLabel
                value="Vegetarian"
                control={<Radio />}
                label="Vegetarian"
              />
            </RadioGroup>
          </FormControl>
        </Grid>
      </Grid>
    ));
  }

  return (
    <Paper>
      <Grid container spacing={2}>
        <Grid item xs={4} md={4} lg={4}>
          <Typography>Date: April 14, 2025</Typography>
        </Grid>
        <Grid item xs={4} md={4} lg={4}>
          <Typography>Location: </Typography>
        </Grid>
        <Grid item xs={4} md={4} lg={4}>
          <Typography>RSVP Deadline: </Typography>
        </Grid>
        <Grid item xs={4} md={4} lg={4}>
          <TextField required label="Name" variant="outlined" />
        </Grid>
        <Grid item xs={4} md={4} lg={4}>
          <FormControl>
            <FormLabel>Are you attending?</FormLabel>
            <RadioGroup>
              <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
              <FormControlLabel value="No" control={<Radio />} label="No" />
            </RadioGroup>
          </FormControl>
        </Grid>
        <Grid item xs={4} md={4} lg={4}>
          <Button
            onClick={onAddBtnClick}
            sx={{ maxWidth: 240 }}
            variant="contained">
            Add Additional Guests
            {/* TODO: only allow guests we've selected; allow kids? */}
          </Button>
        </Grid>
        {guestList}
        <Grid item xs={6} md={6} lg={6}>
          <TextField
            label="Dietary Restrictions"
            variant="outlined"
          />
        </Grid>
        <Grid item xs={6} md={6} lg={6}>
          <TextField
            label="Song Request"
            variant="outlined"
          />
        </Grid>
        <Grid item>
          <Button sx={{ maxWidth: 80 }} variant="contained">Submit</Button>
        </Grid>
      </Grid>
    </Paper>
  );
}

export default Rsvp;