import { useState } from "react";
import { Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { useCookies } from "react-cookie";

const Login = () => {
    const [cookies, setCookie] = useCookies(['name']);
    const [rememberme, setPersistence] = useState(true);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [returnmess, returnMessage] = useState("");
    const [isLoading, setLoading] = useState(false);

    const navigate = useNavigate();

    const handleLogin = async (e) => {
        setLoading(true);
        e.preventDefault();

        const response = await fetch(`https://localhost:7292/api/Login?rememberMe=${rememberme}`, {
            method: 'POST',
            credentials: 'include',
            headers: {
               'Accept': 'text/json',
               'Content-Type': 'text/json'
            },
            body: JSON.stringify({ email, password })
        });

        if (response.status === 200) {
            var rep = await response.json();
            if (rep.succeeded === true) {
                const confirm = await fetch(`https://localhost:7292/api/WhoAmI`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                       'Accept': 'text/json',
                       'Content-Type': 'text/json'
                    }
                });
                const user = await confirm.json();
                setCookie('GMGM', {...user, LoggedIn:true},  { path: '/', SameSite:'strict' })
                navigate("/");
            }
            else {
                returnMessage("L'adresse courriel ou le mot de passe est incorrect.");
                setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict' })      
            } 
        }
        else {
            returnMessage("Erreur d'API, veuillez réessayer plus tard.")
            setCookie('GMGM', {LoggedIn:false},  { path: '/', SameSite:'strict' })      
        } 
        setPassword("");
        setLoading(false);
    }

    if (isLoading) return (<div className="cat-load"/>)

    return (
        <div className="inventaire-form-container">
          
            <form className="form-horizontal" onSubmit={handleLogin}>
                <h4 className="text-center">Connexion</h4>
                <div>
                    <h5>{returnmess}</h5>
                </div>
                <div className="form-group">
                    <label>Adresse courriel </label>
                    <input className="form-control form-input" type='text'
                        placeholder="Adresse..."
                        value={email}
                        onChange={(e) => setEmail(e.target.value)} />
                </div>
                <div className="form-group">
                    <label>Mot de passe: </label>
                    <input type='password' className="form-control form-input"
                        placeholder="Mot de passe..."
                        value={password}
                        onChange={(e) => setPassword(e.target.value)} />
                </div>
                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Connexion</Button>
            </form>
        </div>
    )
}

export default Login;