import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Paper, TextField, Typography } from '@mui/material';
import { useForm } from 'react-hook-form';
import { useAppDispatch } from '../hooks';
import { setAdmin } from '../slices/auth/adminSlice';
import { useLoginAdminMutation } from '../slices/api/adminSlice';
import { showSnackbar } from '../slices/snackbarSlice';
import { isFetchBaseQueryError } from '../error';
import type { Credentials } from '../models';
import type { Data } from '../error';

function GuestLogin() {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const [login] = useLoginAdminMutation();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Credentials>({
    defaultValues: {
      username: '',
      password: '',
    },
  });

  const onSubmit = async (data: Credentials) => {
    try {
      dispatch(setAdmin(await login(data).unwrap()));
      navigate('/dashboard');
    } catch (error) {
      if (isFetchBaseQueryError(error)) {
        dispatch(
          showSnackbar({
            message: (error.data as Data).message,
            severity: 'error',
          })
        );
      } else {
        dispatch(
          showSnackbar({
            message: 'No response',
            severity: 'error',
          })
        );
      }
    }
  };

  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,
        }}
      >
        <Typography variant="h6">Admin Login</Typography>
        <TextField
          label="Username"
          variant="outlined"
          margin="normal"
          fullWidth
          error={!!errors.username}
          helperText={errors.username?.message}
          required
          {...register('username', { required: 'This field is required' })}
        />
        <TextField
          label="Password"
          variant="outlined"
          margin="normal"
          fullWidth
          error={!!errors.password}
          helperText={errors.password?.message}
          required
          {...register('password', { required: 'This field is required' })}
        />
        <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
          Log in
        </Button>
      </Paper>
    </form>
  );
}

export default GuestLogin;