import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, Container, TextField, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { setCredentials } from '../slices/authSlice';
import { useLoginMutation } from '../slices/apiSlice';
import type { LoginRequest } from '../slices/apiSlice';

function GuestLogin() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [login] = useLoginMutation();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginRequest>({
    defaultValues: {
      firstName: '',
      lastName: '',
    },
  });

  const onSubmit = async (data: LoginRequest) => {
    try {
      dispatch(setCredentials(await login(data).unwrap()));
      navigate('/rsvp');
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <Container
      component="form"
      maxWidth="xs"
      noValidate
      onSubmit={handleSubmit(onSubmit)}
    >
      <div
        style={{
          marginTop: 80,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Typography variant="h6">Guest Login</Typography>
        <TextField
          label="First Name"
          variant="outlined"
          margin="normal"
          fullWidth
          error={!!errors.firstName}
          helperText={errors.firstName?.message}
          required
          {...register('firstName', { required: 'This field is required' })}
        />
        <TextField
          label="Last Name"
          variant="outlined"
          margin="normal"
          fullWidth
          error={!!errors.lastName}
          helperText={errors.lastName?.message}
          required
          {...register('lastName', { required: 'This field is required' })}
        />
        <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
          Log in
        </Button>
      </div>
    </Container>
  );
}

export default GuestLogin;
