import "../stylesheets/Register.css";
import {FormEvent, useState} from "react";
import {setCookie} from "../jwt/Cookies.ts";
import { useNavigate } from 'react-router-dom';
import jwt_decode from 'jsonwebtoken';


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

    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault(); //verhindert, dass die Seite neu geladen wird, wenn das Formular abgeschickt wird
        await handleRegister();
    };

    const handleRegister = async () => {
        console.log("handle register")
        try {
            const requestBody = {
                firstname:firstname,
                lastname:lastname,
                email:email,
                password:password
            };
            console.log(requestBody)
            const res = await fetch("http://localhost:8080/api/v1/auth/register", {
                    method:"POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body:JSON.stringify(requestBody
                    )}
            )
            const {token} = await res.json();
            // @ts-ignore
            const decodedToken = jwt_decode(token);
            const expirationDate = new Date(decodedToken.exp * 1000);
            setCookie("Jwt",token, expirationDate);
            console.log(token);
            navigate('/');
        } catch (error:any) {
            console.error('Fehler bei der Anmeldung:', error.message);
            console.dir(error)
        }
    };

    return (
        <main>
            <div className="register">
                <h2>Registrierung</h2>
                <form onSubmit={handleSubmit}>
                    <div>
                        <label>Vorname:</label>
                        <input
                            type="text"
                            value={firstname}
                            onChange={(e) => setFirstname(e.target.value)}
                        />
                    </div>
                    <div>
                        <label>Nachname:</label>
                        <input
                            type="text"
                            value={lastname}
                            onChange={(e) => setLastname(e.target.value)}
                        />
                    </div>
                    <div >
                            <label>Mailadresse:</label>
                            <input
                                type="text"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                    </div>
                    <div>
                        <label>Passwort:</label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="submitButton">
                            <button type="submit">Anmelden</button>
                    </div>
                </form>
            </div>

        </main>
    );
}

export default Register;