import { TextInput } from '@mantine/core';
import React, { useState } from 'react'
import { notificationError, notificationSuccess } from '../services/Notifications';
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)
        {
            notificationSuccess('Passwort angefordert! Bitte Postfach ' + email + ' checken!');
            //e.currentTarget.reset();
        }
        else if(!data.success && data.message)
        {
            notificationError(data.message);
        }
    }

    return ( 
        <div className='InputForm'>
            <h2>Neues Passwort setzen!</h2>
            <div className='frameCenter'>
            <div className='frame'>
            <form onSubmit={submitForm}>
                <div className='neben'>
                <TextInput
                    label = 'Email:'
                    type="email" 
                    name="email" 
                    onChange={onChangeInput} 
                    placeholder="Deine Email" 
                    id="email" 
                    value={email} 
                    required />
                </div> 
                <button type="submit" >Passwort anfordern</button>
            </form>
            </div>
            </div>
        </div>
    )
} 

export default WantNewPw