import { useState } from "react";
import { Button } from "react-bootstrap";

const Login = () => {
    const [rememberme, setPersistence] = useState(true);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [returnmess, returnMessage] = useState("");

    const handleLogin = async (e) => {
        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'
                    }
                });
                // TODO: Redirection vers Home et ajout du cookie pour React pour le layout. 
                console.log(await confirm.json())
                returnMessage("WOOHOO!");
            }
            else  returnMessage("L'adresse courriel ou le mot de passe est incorrect.");
        }
        else returnMessage("Erreur d'API, veuillez réessayer plus tard.")           
        setPassword("");
    }

    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>
                <Button className="btn-primary btn-ajouter-morceau" type="button" >
                    <a href="http://localhost:3000/register">Nouvel utilisateur</a>
                </Button>
            </form>
        </div>
    )
}

export default Login;