import Image from "next/image";
import React, { useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import axios from "axios";
import { toast } from "react-toastify";

const validationSchema = Yup.object().shape({
  fullName: Yup.string().required("Full name is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
  phone: Yup.string().required("Phone number is required"),
  zipCode: Yup.string().required("Zip code is required"),
  message: Yup.string().required("Message is required")
});
const GetinTouch = () => {
  const [phone, setPhone] = useState("");
  return (
    <section className="get-in-touch-session">
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <div className="row mb-3">
              <div className="col-12">
                <div className="head-btn">
                  <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                    <div className="head01">
                      <div className="title">Let’s</div>
                      <h2>Get In Touch</h2>
                    </div>
                  </motion.div>
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col-12">
                <Formik
                  initialValues={{
                    fullName: "",
                    email: "",
                    phone: "",
                    zipCode: "",
                    message: ""
                  }}
                  validationSchema={validationSchema}
                  onSubmit={async (values, { setSubmitting }) => {
                    // Handle form submission here
                    console.log(values);

                    setSubmitting(false);
                    const finalData = {
                      name: values.fullName,
                      email: values.email,
                      number: values.phone,
                      zip: values.zipCode,
                      message: values.message
                    };
                    const config = {
                      header: {
                        "Content-Type": "application/json"
                      }
                    };
                    const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/contact-uses`, { data: finalData }, config);
                    if (response.status == 200) {
                      toast.success("Thank you, we will get back to you shortly.");
                    }
                    console.log(response);
                  }}
                >
                  {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
                    <Form className="form-01">
                      <div className="row">
                        <div className="col-md-6 mb-4">
                          <Field
                            className="form-control"
                            type="text"
                            name="fullName"
                            placeholder="Enter Your Full Name"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.fullName}
                          />
                          {touched.fullName && errors.fullName && <div className="text-danger">{errors.fullName}</div>}
                        </div>
                        <div className="col-md-6 mb-4">
                          <Field
                            className="form-control"
                            type="email"
                            name="email"
                            placeholder="Enter Your Email Address"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                          />
                          {touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
                        </div>
                        <div className="col-md-6 mb-4">
                          <Field
                            as={PhoneInput}
                            inputClass="form-control"
                            country={"us"}
                            name="phone"
                            placeholder="Enter Your Contact Number"
                            onChange={phone => handleChange({ target: { name: "phone", value: phone } })}
                            onBlur={handleBlur}
                            value={values.phone}
                          />
                          {touched.phone && errors.phone && <div className="text-danger">{errors.phone}</div>}
                        </div>
                        <div className="col-md-6 mb-4">
                          <Field
                            className="form-control"
                            type="text"
                            name="zipCode"
                            placeholder="Enter Your Zip Code"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.zipCode}
                          />
                          {touched.zipCode && errors.zipCode && <div className="text-danger">{errors.zipCode}</div>}
                        </div>
                        <div className="col-md-12 mb-4">
                          <Field
                            className="form-control"
                            as="textarea"
                            rows={7}
                            name="message"
                            placeholder="Type your message..."
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.message}
                          />
                          {touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
                        </div>
                        {/* {console.log(errors)} */}
                        <div className="col-md-12">
                          <button className="btn btn-primary" type="submit" disabled={Object.keys(errors).length > 0}>
                            Submit
                          </button>
                        </div>
                      </div>
                    </Form>
                  )}
                </Formik>
              </div>
            </div>
          </div>
          <div className="col-md-6">
            <div className="rt-banner">
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/contact-us-img.png" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default GetinTouch;