import React, { useState } from 'react'
import toast, { Toaster } from 'react-hot-toast';
import {wantNewPw} from '../services/PhpApi'
import './InputForm.css';

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

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

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
    {
        e.preventDefault();
//        console.log(email);
        // console.log((e.currentTarget.elements[0] as HTMLInputElement).value);
        // if((e.currentTarget.elements[0] as HTMLInputElement).value.trim() === '')
        // {
        //     toast.error('Bitte Feld ausfüllen!');
        //     return;
        // }
 
        const data = await wantNewPw({email: email});
        if(data.success)
        {
            toast.success('Passwort angefordert! Bitte Postfach ' + email + ' checken!');
            //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>
            <div className='frameCenter'>
            <div className='frame'>
            <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>
            </div>
        </div>
    )
} 

export default WantNewPw