import { useState, useContext } from "react";
import styles from "./loginForm.module.css";
import Button from "../ui/button/button.jsx";
import Input from "../ui/input/input.jsx";
import { useNavigate } from "react-router";
import { AuthContext } from "../../contexts/auth/AuthContext.js";


function LoginForm({ className }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    let navigate = useNavigate();
    const { login } = useContext(AuthContext);

    async function handleSubmit(e) {
        e.preventDefault();
        await login(email, password);
        navigate("/");
    }

    return (
        <div className={`${className} glassCard ${styles.inputContainer}`}>
            <div className={styles.formgroup}>
                <Input
                    type="email"
                    value={email}
                    placeholder="Adresse mail"
                    onChange={e => setEmail(e.target.value)}
                    style={{ width: '100%' }}
                />
            </div>
            <div className={styles.formgroup}>
                <Input password={true} onChange={e => setPassword(e.target.value)} value={password} />
            </div>

            <div className={styles.logButton}>
                <Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
            </div>
        </div>
    );
}

export default LoginForm;