import {useContext, useState} from 'react'
import {Link} from 'react-router-dom'
import {UserCtx, UserCtxT} from '../context/UserContext';
import './Register.css';


const Register = () => {
    const {registerUser, wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
    const [errMsg, setErrMsg] = useState("false");
    const [successMsg, setSuccessMsg] = useState("false");
    const [formData, setFormData] = useState({
        email:'',
        password:'',
        password2:''
    });

    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
        setFormData({
            ...formData,
            [e.currentTarget.name]:e.currentTarget.value
        })
    }

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
    {
        e.preventDefault();

        if(!Object.values(formData).every(val => val.trim() !== '')){
            setSuccessMsg("false");
            setErrMsg('Bitte alle Felder ausfüllen!');
            return;
        }

        if(formData.password !== formData.password2)
        {
            setSuccessMsg("false");
            setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
            return;

        }

        const data = await registerUser(formData);
        if(data.success){
            setSuccessMsg('Erfolgreich Registriert!');
            setErrMsg("false");
            e.currentTarget.reset();
        }
        else if(!data.success && data.message){
            setSuccessMsg("false");
            setErrMsg(data.message);
        }
    }

    return (
        <div className='Register'>
            <h2>Register</h2>
            <form onSubmit={submitForm}>
                <div className='neben'>
                    <label htmlFor="email">Email: </label>                    
                    <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
                </div>
                <div className='neben'>
                    <label htmlFor="password">Passwort: </label>
                    <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
                </div> 
                <div className='neben'>
                    <label htmlFor="password2">Passwort wiederholen: </label>
                    <input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
                </div>
                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
                <button type="submit" disabled={wait}>Register</button>
                <div className="bottom-link"><Link to="/login">Login</Link></div>
            </form>
        </div>
    )
}
export default Register;