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 finaldata = new FormData();
    const leadData = {
      mobilenumber: data.Mobile,
      email: data.Email,
      message: data.AdditionalMessage || "",
      name: data.Name,
      company: data.Company,
      source: data.source,
    };

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

    const strapiData = {
      data: {
        Name: data.Name,
        Phone: data.Mobile,
        Email: data.Email,
        Message: data.AdditionalMessage || "",
        Company: data.Company,
        Source: data.source,
      },
    };

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

    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);
        });
    };
    sendEmaill(data);

    reset();
  };

  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 us today for an insightful discussion on how
                  Advith Consulting's 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"
                            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} 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}
                            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;