import Image from "next/image";
import React from "react";
import { Col, Container, Form, Row } from "react-bootstrap";
import Heading from "./Heading";
import { motion } from "framer-motion";
import { slideFromLeft } from "./variants";
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";
import axios from "axios";
const CallBackRequest = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
    register,
    reset,
  } = useForm({
    mode: "onBlur",
  });

  // email api
  const router = useRouter();
  // const onSubmit = async (data) => {
  //   const leadData = {
  //     mobilenumber: data.Mobile,
  //     email: data.Email,
  //     message: data.AdditionalMessage || "",
  //     name: data.Name,
  //     service: data.service,
  //     source: data.source,
  //   };
  //   console.log(leadData, "form-data");

  //   const strapiData = {
  //     data: {
  //       Name: data.Name,
  //       Phone: data.Mobile,
  //       Email: data.Email,
  //       Service: data.service,
  //       Source: data.source,
  //     },
  //   };
  //   console.log("strapiData", strapiData);

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

  //   try {
  //     const response = await axios.post(
  //       `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/service-forms`,
  //       strapiData,
  //       config
  //     );
  //     if (response.status === 200) {
  //       console.log("Form submited to strapi");
  //     }
  //   } catch (error) {
  //     console.error(error);
  //   }

  //   await fetch("/api/submitZoho", {
  //     method: "POST",
  //     headers: { "Content-Type": "application/json" },
  //     body: JSON.stringify(leadData),
  //   });

  //   try {
  //     const response = await axios.post("/api/homegooglesheet", leadData, {
  //       headers: {
  //         "Content-Type": "application/json",
  //       },
  //     });
  //     console.log("Google Sheet API response:", response?.data);
  //     if (response.data.success) {
  //       router.push("/thank-you");
  //       sendEmaill(data);
  //     }
  //   } catch (error) {
  //     console.error(
  //       "Error submitting to Google Sheet API:",
  //       error.response ? error.response.data : error.message
  //     );
  //   }
  //   reset();
  // };

  // const sendEmaill = (data) => {
  //   fetch("/api/sendEmailHome", {
  //     method: "POST",
  //     headers: {
  //       Accept: "application/json, text/plain, */*",
  //       "Content-Type": "application/json",
  //     },
  //     body: JSON.stringify(data),
  //   })
  //     .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);
  //     });
  // };


    const onSubmit = async (data) => {
    const leadData = {
      mobilenumber: data.Mobile,
      email: data.Email,
      message: data.AdditionalMessage || "",
      name: data.Name,
      service: data.service,
      source: data.source || "Home page form",
    };

    console.log("Submitting to Zoho:", leadData);

    try {
      const response = await fetch("/api/submitZoho", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(leadData),
      });

      if (response.ok) {
        console.log("Form submitted successfully to Zoho");
        router.push("/thank-you");
        reset();
      } else {
        console.error("Zoho submission failed:", response.status);
      }
    } catch (error) {
      console.error("Error submitting form:", error);
    }
  };

  
  return (
    <>
      <div className="free-quote-area ptb-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="free-quote-image">
                <motion.div
                  variants={slideFromLeft(0.5)}
                  initial={"hidden"}
                  whileInView={"show"}
                  viewport={{ once: false, amount: 0.4 }}
                >
                  <Image
                    src="/images/contact-us.png"
                    layout="fill"
                    className="img-fluid image"
                    alt="image"
                  />
                </motion.div>
              </div>
            </Col>

            <Col lg={6} md={12}>
              <div className="free-quote-text">
                <Heading el="h2" heading="Write to Us!" />
                <span>
                  Have a quick question or need more information? Fill out the
                  form below, and we'll get back to you as soon as possible
                </span>
                <form onSubmit={handleSubmit(onSubmit)}>
                  <Row>
                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Your Name</label>
                        <Form.Group>
                          <Form.Control
                            type="text"
                            className="form-control"
                            {...register("Name", {
                              required: "Enter Your Name",
                              maxLength: {
                                value: 100,
                                message: "Name is too long",
                              },
                            })}
                          />
                          {errors.Name && (
                            <span className="error">{errors.Name.message}</span>
                          )}

                          <Form.Control
                            required
                            type="text"
                            placeholder="Name"
                            defaultValue={"Home page form"} // Set defaultValue
                            className="text-dark d-none"
                            {...register("source", {})}
                          />
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Your Email</label>
                        <Form.Group>
                          <Form.Control
                            required
                            type="text"
                            className="form-control"
                            {...register("Email", {
                              required: "Enter Your Email",
                              pattern: {
                                value:
                                  /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                message: "Invalid email address",
                              },
                            })}
                          />
                          {errors.Email && (
                            <span className="error">
                              {errors.Email.message}
                            </span>
                          )}
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Phone Number</label>
                        <Form.Group>
                          <Form.Control
                            required
                            type="text"
                            className="form-control"
                            onInput={(e) => {
                              e.target.value = e.target.value.replace(
                                /[^0-9]/g,
                                ""
                              );
                            }}
                            {...register("Mobile", {
                              required: "Enter Your Mobile Number",
                              maxLength: {
                                value: /^[6-9]\d{9}$/,
                                message: "Invalid Mobile number",
                              },
                            })}
                          />
                          {errors.Mobile && (
                            <span className="error">
                              {errors.Mobile.message}
                            </span>
                          )}
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <label>Services</label>
                        <Form.Group>
                          <Form.Control
                            type="text"
                            placeholder="Enter Service"
                            required
                            {...register("service", {
                              required: "Enter Service",
                            })}
                            className="form-control"
                          />
                          {errors.service && (
                            <span className="error">
                              {errors.service.message}
                            </span>
                          )}
                        </Form.Group>
                      </div>
                    </Col>

                    <Col lg={6} md={6}>
                      <div className="form-group">
                        <button type="submit" className="default-btn">
                          Submit
                          <i className="ri-arrow-right-line"></i>
                        </button>
                      </div>
                    </Col>
                  </Row>
                </form>
              </div>

              <></>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default CallBackRequest;