import { useState } from "react";
import { notificationError, notificationSuccess } from "../services/Notifications";
import { foundMsg, logFormData } from "../services/PhpApi";
import { Textarea, TextInput } from '@mantine/core';
import './ContactForm.css';

export default function DogContactForm(
    {toEmail, name, qr_id}: 
    {toEmail: string, name: string, qr_id: string}) 
{
    const formdata_init = new FormData();
    formdata_init.append('fromEmail', '');
    formdata_init.append('msg', '');
    const [formData, setFormData] = useState<FormData>(formdata_init);

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

        
    }

    const onChangeInputTextArea = (e: React.FormEvent<HTMLTextAreaElement> ) => 
    {
        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() !== ''))
        {
            notificationError('Bitte alle Felder ausfüllen!');
            return;
        }

//        const sendData: any = {...formData};
        const sendData = new FormData();
        const values = Object.values(formData);
        const keys = Object.keys(formData);

        for (const key of keys) 
        {
            const index = keys.indexOf(key);
            sendData.append(key, values[index]);
        }

        sendData.append('toEmail', toEmail);
        sendData.append('name', name);
        sendData.append('qr_id', qr_id);

        logFormData(sendData);

        const data = await foundMsg(sendData);
// const data =    {
//                     success:0,
//                     message: 'error'
//                 };

        if(data.success)
        {
            notificationSuccess('Eine Kopie wurde auch an ' + toEmail + ' geschickt!');
            notificationSuccess('Nachricht gesendet!');
        }
        else if(!data.success && data.message)
        {
            notificationError(data.message);
        }
    }

    return (
        <>
<div className="flexCenter">
    <div className="containerForm">
    <form className="formForm" id='idForm' onSubmit={submitForm}>
    <div className="rowForm">
        <div>Bitte schreib eine Email:</div><div></div>
    </div>
    <div className="rowForm">
        <TextInput
            label = 'Email:'
            type="email" 
            name="fromEmail" 
            onChange={onChangeInput} 
            placeholder="Deine Email" 
            id="email" 
            required />
    </div>
    <div className="rowForm">
        <div className='label'>
            <label>An:</label>
        </div>
        <div>
            <label>{toEmail}</label>
        </div>
    </div>
    <div className="rowForm">
        <Textarea
            label = 'Nachricht:'
            name="msg" 
            onChange={onChangeInputTextArea} 
            placeholder={`Ich habe ${name} gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)`}
            id="msg" 
            required />
    </div>
        <div className="rowForm">
        <div></div><input type="submit" value="Nachricht senden!"/>
        </div>
    </form>
    </div>
</div>
    </>
);

}