import {
  Button,
  Container,
  FormControl,
  FormControlLabel,
  FormLabel,
  Grid,
  Radio,
  RadioGroup,
  TextField,
} 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"
      noValidate
      onSubmit={handleSubmit(onSubmit)}
    >
      <Grid container spacing={2} sx={{ mt: 8 }}>
        <Grid item xs={12}>
          <p>
            Please RSVP for the wedding by March 10, 2025. The ceremony will
            commence at 3 pm on April 26 in Divine Shepherd. The reception will
            follow at 5 pm in A Venue on the Ridge.
          </p>
        </Grid>
        <Grid item xs={12}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <FormControl>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <FormLabel sx={{ mr: 2 }} error={!!errors.attendance} required>
                  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>
                  )}
                />
              </div>
            </FormControl>
          </div>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
          <TextField
            label="Email"
            variant="outlined"
            fullWidth
            error={!!errors.email}
            helperText={errors.email?.message}
            required
            {...register('email', {
              required: 'This field is required',
              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}
            required
            {...register('partySize', {
              required: 'This field is required',
              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}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Button type="submit" variant="contained">
              RSVP
            </Button>
          </div>
        </Grid>
      </Grid>
    </Container>
  );
}

export default RsvpForm;