import { Box } from '@mui/material';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import LoginForm from '../components/LoginForm';
import Alert from '@mui/material/Alert';
import { useNavigate } from 'react-router-dom';
import Title from '../components/Title';
import { useLoginMutation } from '../store/api';
import { loginAction } from '../store/authSlice';
const LoginPage = () => {
  const token = useSelector(state => state.auth.token);
  const userId = useSelector(state => state.auth?.payload?.sub?.id);
  const error = useSelector(state => state.auth.error);
  const admin = useSelector(state => state.auth?.payload?.sub?.acl.includes('admin'));
  const [fullLogin, result] = useLoginMutation();
  const dispatch = useDispatch();
  const navigate = useNavigate();


  useEffect(() => {
    if (token) {
      if (admin) {
        navigate('/admin');
      } else {
        navigate(`/user/${userId}`);
      }
    }
  }, [token]);

  const onLogin = (login, password) => {
    fullLogin({ login, password }).then(response => {
      dispatch(loginAction(response.data.login));
    });
  }

  return (
    <>
      <Title>Login</Title>
      <Box sx={{ maxWidth: '300px', width: '100%', m: '150px auto' }}>
        <LoginForm submit='Login' onSubmit={onLogin} />
        {error && <Alert sx={{ mt: '20px' }} severity="error">You entered wrong login or password!</Alert>}
      </Box>
    </>
  )
}
export default LoginPage;