import {
  Alert,
  Box,
  Button,
  CircularProgress,
  Grid,
  TextField,
  Typography,
} from "@mui/material";
import React from "react";
import { ServerApi } from "../../api/ServerApi";
import { Link } from "react-router-dom";
import { APIClient } from "../../api/ApiClient";
import { AuthApi } from "../../api/AuthApi";

export function PasswordForgottenRoute(): React.ReactElement {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [success, setSuccess] = React.useState<string | null>(null);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);

    try {
      setError(null);
      setSuccess(null);
      setLoading(true);

      await AuthApi.RequestResetPassword(data.get("email")!.toString());

      setSuccess(
        `Si l'adresse mail spécifiée est valide, alors la demande de réinitalisation de mot de passe a été traitée avec succès. Un courriel provenant de ${ServerApi.Config.mail} devrait alors être arrivé dans votre boîte mail.`
      );
    } catch (e) {
      console.error(e);
      setError("Echec de la demande de réinitialisation de mot de passe!");
    }
    setLoading(false);
  };

  if (loading)
    return (
      <>
        <CircularProgress />
      </>
    );

  return (
    <>
      {error && (
        <Alert style={{ width: "100%" }} severity="error">
          {error}
        </Alert>
      )}
      {success && (
        <Alert style={{ width: "100%" }} severity="success">
          {success}
        </Alert>
      )}

      <Typography component="h2" variant="body1">
        Mot de passe oublié
      </Typography>

      <Box
        component="form"
        noValidate
        onSubmit={handleSubmit}
        sx={{ mt: 1 }}
        style={{ width: "100%" }}
      >
        <TextField
          margin="normal"
          required
          fullWidth
          id="email"
          label="Adresse mail"
          name="email"
          autoComplete="email"
          autoFocus
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={{ mt: 3, mb: 2 }}
        >
          Valider
        </Button>
        <Typography variant="body2" color={"primary"}>
          <Link
            to="/"
            style={{ color: "inherit", textDecorationColor: "inherit" }}
          >
            Retour au formulaire de connexion
          </Link>{" "}
        </Typography>
      </Box>
    </>
  );
}