import React from 'react';
import { Modal, Placeholder } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import qs from "qs";
import axios from "axios";
import { useRouter } from 'next/router';
const PopupForm = ({ show, handleClose }) => {
    const {
        handleSubmit,
        control,
        formState: { errors },
        register,
        reset,
    } = useForm({
        mode: "onBlur",
    });
    const router = useRouter();
    const onSubmit = async (data) => {
        const finaldata = new FormData();

        const strapiData = {
            data: {
                name: data.name,
                email: data.email,
                mobile: data.mobile,
                message: data.Message,
                company: data.Company,
                organization: data.organization,
            },
        };

        // console.log("strapiData", strapiData);

        finaldata.append("data", JSON.stringify(strapiData));
        // console.log("formvalue", finaldata);
        // console.log(leadData, "form-data");

        // strapi
        const config = {
            headers: {
                "Content-Type": "multipart/form-data",
            },
        };

        try {
            const response = await axios.post(
                `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/website-leads`,
                strapiData,
                config
            );
            if (response.status === 200) {
                // router.push("/thankyou");
            }
        } catch (error) {
            console.error(error);
        }
        const emailData = {
            ...data,
            FormSource: "Popup form",
            maillist: ["gaurav.logicloop@gmail.com"],
        };
        const sendEmaill = (emailData) => {
            fetch("/api/sendEmail", {
                method: "POST",
                headers: {
                    Accept: "application/json, text/plain, */*",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(emailData),
            })
                .then((response) => {
                    console.log("response received", response);
                    if (response.status === 200) {
                        console.log("response succeeded");
                    } else {
                        console.log("response failed");
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        };
        sendEmaill(emailData);
        router.push("/thankyou");
        reset();
    };

    return (
        <Modal className='popupform' show={show} onHide={handleClose} centered>
            <Modal.Header closeButton>
                <div>
                    <h5 className="modal-title">Contact us now,
                    </h5>
                    <p>Our team is ready to support you.</p>
                </div>
            </Modal.Header>
            <Modal.Body>
                <form onSubmit={handleSubmit(onSubmit)}>

                    <div className="modal-body">
                        <div className="mb-3">
                            {/* <label className="form-label">Name</label> */}
                            <input
                                className="form-control" Placeholder="Your Full Name*"
                                {...register("name", { required: "Name is required" })}
                            />
                            {errors.name && (
                                <small className="text-danger">
                                    {errors.name.message}
                                </small>
                            )}
                        </div>
                        <div className="mb-3">
                            {/* <label className="form-label">Email</label> */}
                            <input
                                className="form-control"
                                type="email"
                                placeholder='Email*'
                                {...register("email", { required: "Email is required" })}
                            />
                            {errors.email && (
                                <small className="text-danger">
                                    {errors.email.message}
                                </small>
                            )}
                        </div>
                        <div className="mb-3">
                            {/* <label className="form-label">Mobile</label> */}
                            <input
                                className="form-control"
                                type="tel"
                                placeholder='Phone No.*'
                                {...register("mobile", {
                                    required: "Mobile number is required",
                                })}
                            />
                            {errors.mobile && (
                                <small className="text-danger">
                                    {errors.mobile.message}
                                </small>
                            )}
                        </div>
                        <div className="mb-3">
                            <input
                                className="form-control"
                                type="text"
                                name='Company'
                                placeholder='Company Name'
                                {...register("Company", {
                                    required: "Company Name is required",
                                })}
                            />
                            {errors.Company && (
                                <small className="text-danger">
                                    {errors.Company.message}
                                </small>
                            )}
                        </div>

                        {/* <div className="mb-3">
                            <select className="form-control custom-select"
                                name="organization"
                                {...register("organization", {
                                    required: "Select Your Organization",
                                })}>
                                <option disabled selected value className="option-popup">
                                    Business / Organization
                                </option>
                                <option className="option-popup">Business / Organization</option>
                                <option className="option-popup">Business / Organization</option>
                            </select>
                            {errors.organization && (
                                <small className="text-danger">
                                    {errors.organization.message}
                                </small>
                            )}
                        </div> */}
                        <div className='mb-3'>
                            <textarea
                                id="message"
                                rows="3"
                                name="Message"
                                className="form-control"
                                placeholder="Message"
                                {...register("Message", {
                                    required: "Enter Your Message",
                                    maxLength: {
                                        value: 250,
                                        message: "Message is too long",
                                    },
                                })}
                            ></textarea>
                            {errors.Message && (
                                <span className="error">{errors.Message.message}</span>
                            )}
                        </div>
                    </div>
                    <div className="modal-footer d-flex justify-content-start align-items-center">
                        <button type="submit" className="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </form>
            </Modal.Body>
        </Modal>
    );
};

export default PopupForm;