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";

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={(values, { setSubmitting }) => {
                    // Handle form submission here
                    console.log(values);
                    setSubmitting(false);
                  }}
                >
                  {({ 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={"in"}
                            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>
                        <div className="col-md-12">
                          <button className="btn btn-primary" type="submit" disabled={isSubmitting}>
                            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;