import {
  Button,
  FormControl,
  FormControlLabel,
  FormLabel,
  Grid,
  Radio,
  RadioGroup,
  TextField,
  Typography
} from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
import { useOutletContext } from "react-router-dom";
import { useUpdateGuestMutation, Guest, User } from '../apiSlice';

function RsvpForm() {
  const [updateGuest] = useUpdateGuestMutation();
  const user: User = useOutletContext();

  const { register, handleSubmit, control,
  formState: { errors } } = useForm({
    defaultValues: {
      id: user.id,
      attendance: '',
      mealPreference: '',
      dietaryRestrictions: '',
      plusOne: '',
      marriageAdvice: ''
    }
  });

  const onSubmit = async (data: Guest) => {
    console.log(data);
    updateGuest({...data});
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={2}>
        <Grid item xs={12} md={4} lg={4}>
          <Typography>Date: April 14, 2025</Typography>
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <Typography>Location: </Typography>
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <Typography>RSVP Deadline: </Typography>
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <FormControl>
            { errors && <Typography>{errors.attendance?.message}</Typography> }
            <FormLabel>Will you attend our wedding?</FormLabel>
            <Controller
              name="attendance"
              control={control}
              rules={{ required: "Are you attending?" }}
              render={({ field }) => (
                <RadioGroup {...field}>
                  <FormControlLabel
                    value="yes"
                    control={<Radio />}
                    label="Yes"
                  />
                  <FormControlLabel
                    value="no"
                    control={<Radio />}
                    label="No"
                  />
                </RadioGroup>
              )}
            />
          </FormControl>
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <FormControl>
            { errors && <Typography>{errors.mealPreference?.message}</Typography> }
            <FormLabel>Meal Preference</FormLabel>
            <Controller
              name="mealPreference"
              control={control}
              rules={{ required: "What would you like to eat?" }}
              render={({ field }) => (
                <RadioGroup {...field}>
                  <FormControlLabel
                    value="beef"
                    control={<Radio />}
                    label="Beef"
                  />
                  <FormControlLabel
                    value="chicken"
                    control={<Radio />}
                    label="Chicken"
                  />
                </RadioGroup>
              )}
            />
          </FormControl>
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <TextField
            label="Dietary Restrictions"
            variant="outlined"
            {...register("dietaryRestrictions")}
          />
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <TextField
            label="Plus-One"
            variant="outlined"
            {...register("plusOne")}
          />
        </Grid>
        <Grid item xs={12} md={4} lg={4}>
          <TextField
            label="Marriage Advice"
            variant="outlined"
            {...register("marriageAdvice")}
          />
        </Grid>
        <Grid item>
          <Button type="submit" variant="contained">Submit</Button>
        </Grid>
      </Grid>
    </form>
  );
}

export default RsvpForm;