import React from "react";
import { useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import * as Yup from "yup";
import FormSuccess from "./SuccessFormSubmission";
const initialFormData = {
  personName: "",
  email: "",
  phoneNumber: "",
  serviceSelected: "",
  message: "",
  agreement: false,
};

function Form() {
  const [formData, setFormData] = useState(initialFormData);

  const [errors, setErrors] = useState({});

  const [formSubmitted, setFormSubmitted] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const formData_ValidationSchema = Yup.object({
    personName: Yup.string()
      .min(3, "Name must be at least 3 characters")
      .required("Your name is required"),

    email: Yup.string()
      .matches(
        /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
        "Enter a valid email",
      )
      .required("Email is required"),

    phoneNumber: Yup.string()
      .matches(/^\+?[1-9]\d{11,14}$/, "Enter a valid phone number")
      .required("Phone number is required"),

    serviceSelected: Yup.string().required("Please select a service"),

    message: Yup.string()
      .min(10, "Message must be at least 10 characters")
      .required("Message is required"),

    agreement: Yup.boolean().oneOf(
      [true],
      "You must accept Terms & Conditions",
    ),
  });

  const handleChange = async (e) => {
    const { name, value, type, checked } = e.target;
    const newValue = type === "checkbox" ? checked : value;

    setFormData({ ...formData, [name]: newValue });

    if (isSubmitted) {
      try {
        await Yup.reach(formData_ValidationSchema, name).validate(newValue);
        setErrors((prev) => ({ ...prev, [name]: "" }));
      } catch (err) {
        setErrors((prev) => ({ ...prev, [name]: err.message }));
      }
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitted(true);

    try {
      await formData_ValidationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      setFormSubmitted(true);
    } catch (error) {
      const errMessage = {};
      error.inner.forEach((err) => {
        errMessage[err.path] = err.message;
      });
      setErrors(errMessage);
    }
  };

  return (
    <>
      <div className="main-wrapper flex justify-center items-center py-4 lg:py-0 w-full min-h-screen">
        {/* Form */}

        {formSubmitted ? (
          <FormSuccess
            onBack={() => {
              setFormData(initialFormData);
              setErrors({});
              setFormSubmitted(false);
            }}
          />
        ) : (
          <div className="form-wrapper rounded-2xl w-[90%] md:w-[70%] lg:w-[60%] xl:w-[40%]">
            {/* Form Heading */}
            <div className="form-head">
              <h1 className="text-base md:text-lg lg:text-xl xl:text-2xl py-3">
                Contact Us
              </h1>
            </div>
            {/* Form inputs container */}
            <form className="form-inputs-container" onSubmit={handleSubmit}>
              {/* Name Input */}

              <div className="grid grid-cols-1 md:grid-cols-2 md:gap-3">
                <div className="form-group">
                  <label htmlFor="name" className="form-label">
                    Name
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="personName"
                    placeholder="Enter your name"
                    value={formData.personName}
                    onChange={handleChange}
                  />
                  {errors.personName && (
                    <p style={{ color: "red" }}>{errors.personName}</p>
                  )}
                </div>

                {/* Email Input */}
                <div className="form-group">
                  <label htmlFor="emails" className="form-label">
                    Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="Enter your email"
                    value={formData.email}
                    onChange={handleChange}
                  />
                  {errors.email && (
                    <p style={{ color: "red" }}>{errors.email}</p>
                  )}
                </div>
              </div>

              {/* Phone Input */}
              <div className="grid grid-cols-1 md:grid-cols-2 md:gap-3">
                <div className="form-group phone-input">
                  <label htmlFor="phones" className="form-label">
                    Phone
                  </label>
                  <PhoneInput
                    country={"in"}
                    value={formData.phoneNumber}
                    onChange={async (phone) => {
                      setFormData({ ...formData, phoneNumber: phone });

                      if (isSubmitted) {
                        try {
                          await Yup.reach(
                            formData_ValidationSchema,
                            "phoneNumber",
                          ).validate(phone);
                          setErrors((prev) => ({ ...prev, phoneNumber: "" }));
                        } catch (err) {
                          setErrors((prev) => ({
                            ...prev,
                            phoneNumber: err.message,
                          }));
                        }
                      }
                    }}
                    name="phoneNumber"
                  />

                  {errors.phoneNumber && (
                    <p style={{ color: "red" }}>{errors.phoneNumber}</p>
                  )}
                </div>

                {/* Dropdown Input */}
                <div className="form-group">
                  <label htmlFor="services-1.1" className="form-label">
                    Services
                  </label>
                  <select
                    id="services"
                    name="serviceSelected"
                    value={formData.serviceSelected}
                    onChange={handleChange}
                  >
                    <option value="">Select a service</option>
                    <option value="android_development">
                      Android Development
                    </option>
                    <option value="web_development">Web Development</option>
                    <option value="digital_marketing">Digital Marketing</option>
                    <option value="seo_optimization">SEO Optimization</option>
                    <option value="data_analysis">Data Analysis</option>
                  </select>
                  {errors.serviceSelected && (
                    <p style={{ color: "red" }}>{errors.serviceSelected}</p>
                  )}
                </div>
              </div>
              {/* Textarea */}
              <div className="grid grid-cols-1">
                <div className="form-group">
                  <label htmlFor="messages" className="form-label">
                    Message
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    placeholder="Write your message"
                    value={formData.message}
                    onChange={handleChange}
                  ></textarea>
                  {errors.message && (
                    <p style={{ color: "red" }}>{errors.message}</p>
                  )}
                </div>
              </div>
              {/* Checkbox Input */}
              <div className="grid grid-cols-1">
                <div className="form-group">
                  <input
                    type="checkbox"
                    id="agreement-line"
                    name="agreement"
                    checked={formData.agreement}
                    onChange={handleChange}
                  />
                  <label htmlFor="agreement-line" className="form-label">
                    I have read and agree to the Terms & Conditions and Privacy
                    Policy
                  </label>
                  {errors.agreement && (
                    <p style={{ color: "red" }}>{errors.agreement}</p>
                  )}
                </div>
              </div>
              {/* Submit Button */}
              <div className="grid grid-cols-1">
                <div className="form-group items-center mt-3 md:mt-0">
                  <input type="submit" value="Submit" />
                </div>
              </div>
            </form>
          </div>
        )}
      </div>
    </>
  );
}

export default Form;