import {Alert, Box, Button, Container, Link, TextField, Typography} from "@mui/material"; 
import {useEffect, useState} from "react"; 
import {useNavigate} from "react-router-dom"; 
import {signInUser} from "../firebase"; 
import {isLoggedIn, startSession} from "../session"; 
 
export default function Login() { 
 
  const navigate = useNavigate(); 
 
  const [error, setError] = useState(""); 
  const [email, setEmail] = useState(""); 
  const [password, setPassword] = useState(""); 
 
  // redirect the user if he's already logged in 
  useEffect(() => { 
    if (isLoggedIn()) { 
      navigate("/user"); 
    } 
  }, [navigate]); 
 
  const onSubmit = async (event) => { 
    event.preventDefault(); 
 
    // validate the inputs 
    if (!email || !password) { 
      setError("Пожалуйста, введите свое имя пользователя и пароль."); 
      return; 
    } 
 
    // clear the errors 
    setError(""); 
 
    try { 
      let loginResponse = await signInUser(email, password); 
      startSession(loginResponse.user); 
      navigate("/user"); 
    } catch (error) { 
      console.error(error.message); 
      setError(error.message); 
    } 
  } 
 
  return ( 
    <Container maxWidth="xs" sx={{mt: 2}}> 
      <Typography variant="h5" component="h1" gutterBottom textAlign="center"> 
        Вход
      </Typography> 
      {error && <Alert severity="error" sx={{my: 2}}>{error}</Alert>} 
      <Box component="form" onSubmit={onSubmit}> 
        <TextField 
          label="Почта" 
          variant="outlined" 
          autoComplete="email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          sx={{mt: 1}} 
          fullWidth 
        /> 
        <TextField 
          label="Пароль" 
          variant="outlined" 
          type="password" 
          autoComplete="new-password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          sx={{mt: 3}} 
          fullWidth 
        /> 
        <Button variant="contained" type="submit" sx={{ mt: 3, backgroundColor: '#484848', color: '#FFF' }} fullWidth>
          Войти
        </Button>
        <Box sx={{mt: 2}}> 
        У вас еще нет учетной записи? <Link href="/register">Зарегистрироваться</Link> 
        </Box> 
      </Box> 
    </Container> 
  ) 
}