"use client";
import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import ContactInputs from "./ContactInputs";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
import { useState } from "react";
import { useFormState } from "react-dom";
import { createContactFormSubmission } from "@app/actions/contact-request";
import Swal from "sweetalert2";

const ContactForm = () => {
  const { executeRecaptcha } = useGoogleReCaptcha();

  const initialState = {
    message: "",
  };

  const [isSubmitting, setIsSubmitting] = useState(false);

  const [state, formAction]: any = useFormState(
    async (prevState: any, formData: any) => {
      if (!executeRecaptcha) {
        console.log("Not available to execute recaptcha");
        return;
      }

      const gRecaptchaToken = await executeRecaptcha("inquirySubmit");

      setIsSubmitting(true); // Set submitting state before submission
      const result: any = await createContactFormSubmission(
        prevState,
        formData,
        gRecaptchaToken
      );
      setIsSubmitting(false); // Reset submitting state after response
      console.log(result);

      return result;
    },
    initialState
  );

  let error = state.error;

  if (state.status === "success") {
    // Show success popup on server confirmation
    Swal.fire({
      title: "Success!",
      text: state.message,
      icon: "success",
    });
    // Reset form inputs
    const form = document.querySelector(".contact-form") as HTMLFormElement;
    form.reset();
  }

  return (
    <>
      <Seperator />
      <section>
        <div className="content-fluid py-2">
          <div className="contact-form-wrapper">
            <h2 className="section-header gradient-text">
              <span className="z-index-1">DROP US A NOTE:</span>
            </h2>
            <SeperatorInner />
            <form action={formAction} className="contact-form">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-9">
                <ContactInputs error={error} />
              </div>
              <SeperatorInner />
              {error?.recaptcha ? (
                <div className="flex justify-center mt-5">
                  <p className="field-error">{error.recaptcha}</p>
                </div>
              ) : (
                ""
              )}
              <div className="flex justify-end">
                <button
                  className={"button-submit"}
                  type="submit"
                  disabled={isSubmitting}
                >
                  <div className="button-text">
                    {isSubmitting ? "Submitting..." : "Submit"}
                  </div>
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>
      <Seperator />
    </>
  );
};

export default ContactForm;