import React, { useState } from "react";
import Link from "next/link";
import GoogleMap from "./GoogleMap";
import { Col, Container, Row, Form } from "react-bootstrap";
import Heading from "@/components/reuseables/Heading";
import { useForm } from "react-hook-form";
import axios from "axios";
import { useRouter } from "next/router";
const ContactForm = () => {
  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,
      company: data.Company,
      source: data.source,
    };
    console.log(leadData, "form-data");

    try {
      const response = await axios.post("/api/googlesheetapi", 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/sendEmail", {
      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="contact-area ptb-100">
        <Container>
          <Row>
            <Col lg={6} sm={12}>
              <GoogleMap />
            </Col>

            <Col lg={6} sm={12}>
              <div className="contact-form">
                <span className="sub-title">SEND MESSAGE</span>
                <Heading heading="Write to Us!" />
                <p>
                  Connect with Advith Consulting today for an insightful
                  consultation on how our tailored services can help propel your
                  business towards success.
                </p>

                <form onSubmit={handleSubmit(onSubmit)}>
                  <Row>
                    <Col lg={6} md={6} sm={6}>
                    <div className="form-group">
                      <Form.Group>
                        <Form.Control
                          required
                          type="text"
                          placeholder="Name"
                          className="text-dark 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={"contact form"} // Set defaultValue
                          className="text-dark d-none"
                          {...register("source", {})}
                        />
                       
                      </Form.Group>
                      </div>
                    </Col>
                    <Col lg={6} md={6} sm={6}>
                    <div className="form-group">
                      <Form.Group>
                        <Form.Control
                          required
                          type="email"
                          className="text-dark form-control"
                          placeholder="Email"
                          {...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} sm={6}>
                    <div className="form-group">
                      <Form.Group>
                        <Form.Control
                          required
                          type="text"
                          placeholder="Mobile"
                          className="text-dark form-control"
                          {...register("Mobile", {
                            required: "Enter Your Mobile Number",
                            maxLength: {
                              value: 10,
                              message: "Invalid Mobile number",
                            },
                          })}
                        />
                        {errors.Mobile && (
                          <span className="error">{errors.Mobile.message}</span>
                        )}
                      </Form.Group>
                      </div>
                    </Col>
                    <Col lg={6} md={6} sm={6}>
                    
                      <div className="form-group">
                        <Form.Group>
                          <Form.Control
                            required
                            type="text"
                            className="text-dark form-control"
                            placeholder="Company Name"
                            {...register("Company", {
                              required: "Enter your Company",
                            })}
                          />
                          {errors.Company && (
                            <span className="error">
                              {errors.Company.message}
                            </span>
                          )}
                        </Form.Group>
                      </div>
                    </Col>
                    <Col lg={12} md={12} sm={6}>
                    <div className="form-group">
                      <Form.Group>
                        <Form.Control
                          as="textarea"
                          rows={5}
                          required
                          type="text"
                          placeholder="Additional message"
                          className="text-dark form-control"
                          {...register("AdditionalMessage", {})}
                        />
                        {errors.AdditionalMessage && (
                          <span className="error">
                            {errors.AdditionalMessage.message}
                          </span>
                        )}
                      </Form.Group>
                      </div>
                    </Col>

                    <Col lg={12} md={12} sm={12}>
                      <button
                        type="submit"
                        className="default-btn submit submit-btn"
                      >
                        Send Message <i className="ri-arrow-right-line"></i>
                      </button>
                    </Col>
                  </Row>
                </form>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default ContactForm;