import React, { useState } from "react";
import validator from "validator";
import { toast } from "react-toastify";

const Form = () => {
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [email, setEmail] = useState("");
    const [emailValid, setEmailValid] = useState(true);

    const changeFirstName = (e) => {
        console.log(` before ..${firstName}`);
        setFirstName(e.target.value);
        console.log(` after ..${firstName}`);
    }

    const changeLastName = (e) => {
        console.log(` before ..${lastName}`);
        setLastName(e.target.value);
        console.log(` after ..${lastName}`);
    }

    const changeEmail = (e) => {
        setEmail(e.target.value);
        setEmailValid(validator.isEmail(e.target.value));
        console.log(validator.isEmail(e.target.value));
    }


    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(e.currentTarget);
        const data = new FormData(e.currentTarget);
        const entries = Object.fromEntries(data);
        console.log(entries);
        setFirstName("");
        setLastName("");
        setEmail("");
        setEmailValid(true);
        toast.success("Form has been submitted successfully!");
    };

    return (
        <div className="formContainer">
            <h2>Subscribe for Newsletter</h2>
            <form onSubmit={handleSubmit} className="newsletterForm">
                <div className="formGroup">
                    <label htmlFor="firstName">First Name</label>
                    <input 
                        type="text" 
                        id="firstName" 
                        name="firstName" 
                        value={firstName} 
                        onChange={changeFirstName} 
                        required 
                    />
                    {firstName && (
                        <small className="charCount">Number of Characters = {firstName.length}</small>
                    )}
                </div>
                <div className="formGroup">
                    <label htmlFor="lastName">Last Name</label>
                    <input 
                        type="text" 
                        id="lastName" 
                        name="lastName" 
                        value={lastName} 
                        onChange={changeLastName} 
                        required 
                    />
                    {lastName && (
                        <small className="charCount">Number of Characters = {lastName.length}</small>
                    )}
                </div>
                <div className="formGroup">
                    <label htmlFor="email">Email</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email"
                        value={email} 
                        onChange={changeEmail} 
                        required 
                    />
                    {email ? (
                        emailValid ? (
                            <small className="charCount" style={{ color: 'red' }}>Email is Valid.</small>
                        ) : (
                            <small className="charCount" style={{ color: 'red' }}>Email is Not Valid..</small>
                        )
                    ) : null}
                </div>
                <button type="submit" className="subscribeButton">Subscribe</button>
            </form>
        </div>
    );
};

export default Form;