import React, { useState } from 'react'
import toast, { Toaster } from 'react-hot-toast';
import './ImportForm.css';

function WantNewPw() 
{
    const [email, setEmail] = useState('');

    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
        setEmail(e.currentTarget.value);
    }

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

        if(e.currentTarget.value.trim() !== '')
        {
            toast.error('Bitte Feld ausfüllen!');
            return;
        }
 
        const data = await wantNewPw(email);
        if(data.success)
        {
            toast.success('Erfolgreich Passwort geändert!');
            e.currentTarget.reset();
        }
        else if(!data.success && data.message)
        {
            toast.error(data.message);
        }
    }

    return ( 
        <div className='InputForm'>
            <Toaster toastOptions={{ position: "top-center" }} />
            <h2>Neues Passwort setzen!</h2>
            <form onSubmit={submitForm}>
                <div className='neben'>
                    <label htmlFor="email">Email: </label>
                    <input type="email" name="email" onChange={onChangeInput} 
                        placeholder="Gleiche Email, wie bei der Registrierung angeben" 
                        id="email" value={email} required />
                </div> 
                <button type="submit" >Passwort anfordern</button>
            </form>
        </div>
    )
} 

export default WantNewPw