"use client"

import React, { useState } from "react"
import { useForm } from "react-hook-form"
import PhoneInput, { Country, isValidPhoneNumber } from "react-phone-number-input"
import "react-phone-number-input/style.css"

type FormInputs = {
    fullName: string
    email: string
    phone: string
    country: string
    message: string
}

const ContactForm: React.FC = () => {
    const {
        register,
        handleSubmit,
        reset,
        watch,
        setValue,
        formState: { errors },
    } = useForm<FormInputs>()

    const [isLoading, setIsLoading] = useState(false)
    const [success, setSuccess] = useState(false)
    const [error, setError] = useState<FormInputs | null>(null)

    const onSubmit = (data: FormInputs) => {
        // -------------------------------

        console.log("data X", data)

        setIsLoading(true)
        fetch("https://kinetic.yaserymc.com/api/Contacts", {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
                "Accept-Language": "ar",
            },
        })
            .then((res) => res.json())
            .then((data) => {
                console.log("response", data)
                if (data.errors) {
                    setError(data.errors)
                    setSuccess(false)
                } else {
                    setSuccess(true)
                    setError(null)
                    reset()
                }
            })
            .finally(() => setIsLoading(false))

        // -------------------------------
        // Handle form submission with data
        console.log(data)
        // Reset form after submission
        // reset()
    }

    return (
        <>
            <div className="contact-area ptb-100">
                <div className="container">
                    <div className="section-title">
                        <h2>Drop us Message for any Query</h2>
                        <p>
                            Reach out to Kinetic Group for inquiries or assistance. Our team is ready to provide support
                            tailored to your needs.
                        </p>
                    </div>

                    <div className="row align-items-center">
                        <div className="col-12">
                            <div className="contact-form">
                                <form onSubmit={handleSubmit(onSubmit)}>
                                    <div className="row">
                                        <div className="col-lg-6 col-md-12">
                                            <div className="form-group">
                                                <input
                                                    type="text"
                                                    {...register("fullName", { required: "Full Name is required" })}
                                                    className={`form-control ${errors.fullName ? "is-invalid" : ""}`}
                                                    placeholder="Name"
                                                />
                                                {errors.fullName && (
                                                    <div className="invalid-feedback">{errors.fullName.message}</div>
                                                )}
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-12">
                                            <div className="form-group">
                                                <input
                                                    type="text"
                                                    {...register("email", {
                                                        required: "Email is required",
                                                        pattern: {
                                                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                                                            message: "Invalid email address",
                                                        },
                                                    })}
                                                    className={`form-control ${errors.email ? "is-invalid" : ""}`}
                                                    placeholder="Email"
                                                />
                                                {errors.email && (
                                                    <div className="invalid-feedback">{errors.email.message}</div>
                                                )}
                                            </div>
                                        </div>

                                        <div className="col-lg-6 col-md-6 col-sm-6">
                                            <div className="form-group">
                                                <PhoneInput
                                                    {...register("phone", {
                                                        required: "Phone number is required",
                                                        validate: (value) =>
                                                            isValidPhoneNumber(value) || "Invalid phone number",
                                                    })}
                                                    className={`form-control ${errors.phone ? "is-invalid" : ""}`}
                                                    placeholder="Phone"
                                                    international
                                                    countryCallingCodeEditable={false}
                                                    defaultCountry="AE"
                                                    value={watch("phone")}
                                                    onChange={(value) =>
                                                        setValue("phone", value || "", {
                                                            shouldValidate: true,
                                                        })
                                                    }
                                                />
                                                {errors.phone && (
                                                    <div className="invalid-feedback">{errors.phone.message}</div>
                                                )}
                                            </div>
                                        </div>

                                        {/* <div className="col-lg-6 col-md-6 col-sm-6">
                                            <div className="form-group">
                                                <PhoneInput
                                                    {...register("phone", {
                                                        required: "Phone number is required",
                                                    })}
                                                    className={`form-control ${errors.phone ? "is-invalid" : ""}`}
                                                    placeholder="Phone"
                                                    international
                                                    countryCallingCodeEditable={false}
                                                    defaultCountry="AE"
                                                />
                                                {errors.phone && (
                                                    <div className="invalid-feedback">{errors.phone.message}</div>
                                                )}
                                            </div>
                                        </div> */}

                                        {/* <div className="col-lg-6 col-md-6 col-sm-6">
                                            <div className="form-group">
                                                <input
                                                    type="tel"
                                                    {...register("phone", {
                                                        required: "Phone number is required",
                                                        pattern: {
                                                            value: /^[0-9]+$/,
                                                            message: "Please enter only numbers",
                                                        },
                                                    })}
                                                    className={`form-control ${errors.phone ? "is-invalid" : ""}`}
                                                    placeholder="Phone"
                                                />
                                                {errors.phone && (
                                                    <div className="invalid-feedback">{errors.phone.message}</div>
                                                )}
                                            </div>
                                        </div> */}

                                        <div className="col-lg-6 col-md-6 col-sm-6">
                                            <div className="form-group">
                                                <input
                                                    type="text"
                                                    {...register("country", { required: "Country is required" })}
                                                    className={`form-control ${errors.country ? "is-invalid" : ""}`}
                                                    placeholder="Country"
                                                />
                                                {errors.country && (
                                                    <div className="invalid-feedback">{errors.country.message}</div>
                                                )}
                                            </div>
                                        </div>

                                        <div className="col-lg-12 col-md-12 col-sm-12">
                                            <div className="form-group">
                                                <textarea
                                                    {...register("message", { required: "Message is required" })}
                                                    cols={30}
                                                    rows={6}
                                                    className={`form-control ${errors.message ? "is-invalid" : ""}`}
                                                    placeholder="Your Message"
                                                ></textarea>
                                                {errors.message && (
                                                    <div className="invalid-feedback">{errors.message.message}</div>
                                                )}
                                            </div>
                                        </div>

                                        <div className="col-lg-12 col-md-12 text-center">
                                            {error && (
                                                <div className="text-danger">{Object.values(error).join(", ")}</div>
                                            )}
                                            <button type="submit" className="default-btn">
                                                Send Message <span></span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ContactForm

// ----------------------------------------------------------------
// ----------------------------------------------------------------
// ----------------------------------------------------------------

// "use client"
// import React, { useState } from "react"
// import { useForm } from "react-hook-form"
// import PhoneInput from "react-phone-number-input"
// import "react-phone-number-input/style.css"

// type FormInputs = {
//     fullName: string
//     email: string
//     phone: string
//     country: string
//     message: string
// }

// const ContactForm: React.FC = () => {
//     const {
//         register,
//         handleSubmit,
//         reset,
//         formState: { errors },
//     } = useForm<FormInputs>()

//     const [isLoading, setIsLoading] = useState(false)
//     const [success, setSuccess] = useState(false)
//     const [error, setError] = useState<FormInputs | null>(null)

//     const onSubmit = (data: FormInputs) => {
//         // Handle form submission with data
//         console.log(data)
//         // Reset form after submission
//         reset()
//     }

//     return (
//         <>
//             <div className="contact-area ptb-100">
//                 <div className="container">
//                     <div className="section-title">
//                         <h2>Drop us Message for any Query</h2>
//                         <p>
//                             Reach out to Kinetic Group for inquiries or assistance. Our team is ready to provide support
//                             tailored to your needs.
//                         </p>
//                     </div>

//                     <div className="row align-items-center">
//                         <div className="col-12">
//                             <div className="contact-form">
//                                 <form onSubmit={handleSubmit(onSubmit)}>
//                                     <div className="row">
//                                         {/* ... (other form fields) ... */}

//                                         <div className="col-lg-6 col-md-6 col-sm-6">
//                                             <div className="form-group">
//                                                 <PhoneInput
//                                                     {...register("phone", {
//                                                         required: "Phone number is required",
//                                                     })}
//                                                     className={`form-control ${errors.phone ? "is-invalid" : ""}`}
//                                                     placeholder="Phone"
//                                                     international
//                                                     countryCallingCodeEditable={false}
//                                                     defaultCountry="AE"
//                                                 />
//                                                 {errors.phone && (
//                                                     <div className="invalid-feedback">{errors.phone.message}</div>
//                                                 )}
//                                             </div>
//                                         </div>

//                                         {/* ... (other form fields) ... */}

//                                         <div className="col-lg-12 col-md-12 text-center">
//                                             {error && (
//                                                 <div className="text-danger">{Object.values(error).join(", ")}</div>
//                                             )}
//                                             <button type="submit" className="default-btn">
//                                                 Send Message <span></span>
//                                             </button>
//                                         </div>
//                                     </div>
//                                 </form>
//                             </div>
//                         </div>
//                     </div>
//                 </div>
//             </div>
//         </>
//     )
// }

// export default ContactForm

// --------------------------------------------------------------------------
// --------------------------------------------------------------------------
// --------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// -------------------------------------------------------------------------------
// -------------------------------------------------------------------------------

// "use client"

// import React, { useState } from "react"
// import Image from "next/image"

// const ContactForm: React.FC = () => {
//     const [formData, setFormData] = useState({
//         name: "",
//         email: "",
//         number: "",
//         subject: "",
//         message: "",
//     })

//     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
//         const { name, value } = e.target
//         setFormData((prevData) => ({
//             ...prevData,
//             [name]: value,
//         }))
//     }

//     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
//         e.preventDefault()
//         // Handle form submission with formData
//         console.log(formData)
//         // Reset form after submission
//         setFormData({
//             name: "",
//             email: "",
//             number: "",
//             subject: "",
//             message: "",
//         })
//     }

//     return (
//         <>
//             <div className="contact-area ptb-100">
//                 <div className="container">
//                     <div className="section-title">
//                         {/* <span className="sub-title">Contact Us</span> */}
//                         <h2>Drop us Message for any Query</h2>
//                         <p>
//                             Reach out to Kinetic Group for inquiries or assistance. Our team is ready to provide support
//                             tailored to your needs.
//                         </p>
//                     </div>

//                     <div className="row align-items-center">
//                         {/* <div className="col-lg-4 col-md-4">
//               <div className="contact-image">
//                 <Image
//                   src="/images/contact.png"
//                   alt="image"
//                   width={310}
//                   height={350}
//                 />
//               </div>
//             </div> */}

//                         <div className="col-12">
//                             <div className="contact-form">
//                                 <form onSubmit={handleSubmit}>
//                                     <div className="row">
//                                         <div className="col-lg-6 col-md-12">
//                                             <div className="form-group">
//                                                 <input
//                                                     type="text"
//                                                     name="name"
//                                                     value={formData.name}
//                                                     onChange={handleChange}
//                                                     className="form-control"
//                                                     placeholder="Name"
//                                                     required
//                                                 />
//                                             </div>
//                                         </div>

//                                         <div className="col-lg-6 col-md-12">
//                                             <div className="form-group">
//                                                 <input
//                                                     type="text"
//                                                     name="email"
//                                                     value={formData.email}
//                                                     onChange={handleChange}
//                                                     className="form-control"
//                                                     placeholder="Email"
//                                                     required
//                                                 />
//                                             </div>
//                                         </div>

//                                         <div className="col-lg-6 col-md-6 col-sm-6">
//                                             <div className="form-group">
//                                                 <input
//                                                     type="tel"
//                                                     name="number"
//                                                     value={formData.number}
//                                                     onChange={handleChange}
//                                                     className="form-control"
//                                                     placeholder="Phone"
//                                                     required
//                                                 />
//                                             </div>
//                                         </div>

//                                         <div className="col-lg-6 col-md-6 col-sm-6">
//                                             <div className="form-group">
//                                                 <input
//                                                     type="text"
//                                                     name="subject"
//                                                     value={formData.subject}
//                                                     onChange={handleChange}
//                                                     className="form-control"
//                                                     placeholder="Subject"
//                                                     required
//                                                 />
//                                             </div>
//                                         </div>

//                                         <div className="col-lg-12 col-md-12 col-sm-12">
//                                             <div className="form-group">
//                                                 <textarea
//                                                     name="message"
//                                                     value={formData.message}
//                                                     onChange={handleChange}
//                                                     cols={30}
//                                                     rows={6}
//                                                     className="form-control"
//                                                     placeholder="Your Message"
//                                                     required
//                                                 ></textarea>
//                                             </div>
//                                         </div>

//                                         <div className="col-lg-12 col-md-12 text-center">
//                                             <button type="submit" className="default-btn">
//                                                 Send Message <span></span>
//                                             </button>
//                                         </div>
//                                     </div>
//                                 </form>
//                             </div>
//                         </div>
//                     </div>
//                 </div>
//             </div>
//         </>
//     )
// }

// export default ContactForm