import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { setGuest } from '../slices/auth/guestSlice';
import { useLoginGuestMutation } from '../slices/api/guestSlice';
import type { Name, StatusProps } from '../models';
import Status from './Status';

function GuestLogin() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [login, { isLoading, error }] = useLoginGuestMutation();
  const [open, setOpen] = useState<boolean>(false);

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

  const onSubmit = async (data: Name) => {
    try {
      dispatch(setGuest(await login(data).unwrap()));
      navigate('/rsvp');
    } catch (e) {
      setOpen(true);
    }
  };

  return (
    <form
      style={{
        height: '100%',
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'start',
      }}
      noValidate
      onSubmit={handleSubmit(onSubmit)}
    >
      <Paper
        elevation={3}
        sx={{
          '&:hover': { boxShadow: 5 },
          width: { xs: '90%', md: 400 },
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          mt: 16,
          p: 2,
          borderRadius: '8px',
        }}
      >
        <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>
        <Snackbar
          open={!isLoading && open}
          onClose={() => setOpen(false)}
          autoHideDuration={5000}
        >
          <div>
            <Status {...({ error, setOpen, type: 'Guest' } as StatusProps)} />
          </div>
        </Snackbar>
      </Paper>
    </form>
  );
}

export default GuestLogin;