import {
  Box,
  Button,
  Container,
  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 } from '../apiSlice';

function RsvpForm() {
  const [updateGuest] = useUpdateGuestMutation();
  const guest: Guest = useOutletContext();

  const { register, handleSubmit, control, formState: { errors } } = useForm({
    defaultValues: {
      id: guest?.id,
      firstName: guest?.firstName,
      lastName: guest?.lastName,
      attendance: '',
      email: '',
      partySize: 1,
      message: ''
    }
  });

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

  return (
    <Container component="form" maxWidth="sm" onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={2} sx={{ mt: 8 }}>
        <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 lg={12}>
          <FormControl>
            <Box 
              sx={{ display: "flex", 
              flexDirection: "row", 
              alignItems: "center" }}
            >
              <FormLabel sx={{ mr: 2 }} error={!!errors.attendance}>
                Will you attend?
              </FormLabel>
              <Controller
                name="attendance"
                control={control}
                rules={{ required: true }}
                render={({ field }) => (
                  <RadioGroup {...field} row>
                    <FormControlLabel
                      value="yes"
                      control={<Radio />}
                      label="Yes"
                    />
                    <FormControlLabel
                      value="no"
                      control={<Radio />}
                      label="No"
                    />
                  </RadioGroup>
                )}
              />
            </Box>
          </FormControl>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
          <TextField
            label="Email"
            variant="outlined"
            fullWidth
            error={!!errors.email}
            helperText={errors.email?.message}
            {...register("email", 
              { required: "Please enter your email address", 
                pattern: { value: /\S+@\S+\.\S+/, 
                  message: "Please enter a valid email address" } 
              })}
          />
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
          <TextField
            label="Party Size"
            type="number"
            variant="outlined"
            fullWidth
            error={!!errors.partySize}
            helperText={errors.partySize?.message}
            {...register("partySize", 
              { required: "Please enter your party size", 
                min: { value: 1, message: "Please enter a positive integer" }, 
                max: { value: 9, message: "Please enter an integer less than 10" } })}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            label="Message to the couple"
            variant="outlined"
            fullWidth
            multiline
            rows={3}
            {...register("message")}
          />
        </Grid>
        <Grid item xs={12}>
          <Box 
            sx={{ display: "flex", 
            flexDirection: "column", 
            alignItems: "center" }}
          >
            <Button 
              type="submit" 
              variant="contained"
            >
              RSVP
            </Button>
          </Box>
        </Grid>
      </Grid>
    </Container>
  );
}

export default RsvpForm;