import { Alert, Box, Button, Checkbox, Container, FormControlLabel, Link, TextField, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { createUser } from "../firebase";
import { useNavigate } from "react-router-dom";
import { isLoggedIn, startSession } from "../session";

export default function Register() {
  const navigate = useNavigate();

  const [error, setError] = useState("");
  const [name, setName] = useState("");
  const [surname, setSurname] = useState("");
  const [patronymic, setPatronymic] = useState("");
  const [login, setLogin] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [repeatPassword, setRepeatPassword] = useState("");
  const [rules, setRules] = useState(false);

  useEffect(() => {
    if (isLoggedIn()) {
      navigate("/user");
    }
  }, [navigate]);

  const onSubmit = async (event) => {
    event.preventDefault();

    if (!name || !surname || !login || !email || !password || !repeatPassword || !rules) {
      setError("Пожалуйста, заполните все обязательные поля,кроме поля отчество и примите правила регистрации.");
      return;
    }

    const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/; // Minimum six characters, at least one letter and one number

    if (password !== repeatPassword) {
      setError("Пароли не совпадают");
      return;
    }

    if (!password.match(passwordPattern)) {
      setError("Пароль должен содержать не менее 6 символов, по крайней мере одну букву и одну цифру.");
      return;
    }

    const namePattern = /^[\u0410-\u044F\s-]+$/; // Кириллические символы, пробел и дефис
    const loginPattern = /^[\w\d-]+$/; // латиница, цифры и тире
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // email

    if (!name.match(namePattern)) {
      setError("Имя содержит недопустимые символы.");
      return;
    }

    if (!surname.match(namePattern)) {
      setError("Фамилия содержит недопустимые символы.");
      return;
    }

    if (patronymic && !patronymic.match(namePattern)) {
      setError("Отчество содержит недопустимые символы.");
      return;
    }

    if (!login.match(loginPattern)) {
      setError("Логин содержит недопустимые символы.");
      return;
    }

    if (!email.match(emailPattern)) {
      setError("Неверный формат электронной почты.");
      return;
    }

    setError("");

    try {
      let registerResponse = await createUser(email, password, rules);
      startSession(registerResponse.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="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          sx={{ mt: 1 }}
          fullWidth
        />
        <TextField
          label="Фамилия *"
          variant="outlined"
          autoComplete="surname"
          value={surname}
          onChange={(e) => setSurname(e.target.value)}
          sx={{ mt: 1 }}
          fullWidth
        />
        <TextField
          label="Отчество"
          variant="outlined"
          autoComplete="patronymic"
          value={patronymic}
          onChange={(e) => setPatronymic(e.target.value)}
          sx={{ mt: 1 }}
          fullWidth
        />
        <TextField
          label="Логин *"
          variant="outlined"
          autoComplete="Login"
          value={login}
          onChange={(e) => setLogin(e.target.value)}
          sx={{ mt: 1 }}
          fullWidth
        />
        <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
        />
        <TextField
          label="Повторите пароль *"
          variant="outlined"
          type="password"
          autoComplete="repeat-new-password"
          value={repeatPassword}
          onChange={(e) => setRepeatPassword(e.target.value)}
          sx={{ mt: 3 }}
          fullWidth
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={rules}
              onChange={(e) => setRules(e.target.checked)}
              color="primary"
            />
          }
          label="Я согласен(а) с правилами регистрации"
          sx={{ mt: 1 }}
        />
        <Button variant="contained" type="submit" sx={{ mt: 3, backgroundColor: '#484848', color: '#FFF' }} fullWidth>
          Зарегистрироваться
        </Button>
        <Box sx={{ mt: 2 }}>
          У вас уже есть учетная запись? <Link href="/login">Войти</Link>
        </Box>
      </Box>
    </Container>
  );
}