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);
    }



    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);
      });
  };

  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/calltoaction.webp"
                    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;