import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
import Swal from "sweetalert2";
import { EmailResponse } from "../..";
import { useSendEmail } from "../../utils/hooks";

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();
  const handleFormSubmit: SubmitHandler<FieldValues> = async (
    data: FieldValues
  ) => {
    try {
      const { status } = (await useSendEmail({
        toAddresses: ["admin@jobrator.com"], //email
        subject: `email received from ${data.name}`,
        body: `An email was received from ${data.name},
Email: ${data.email}
Message: ${data.message}`,
      })) as EmailResponse;
      console.log("status", status);
      if (status === 200) {
        const ok = await Swal.fire({
          title: "Success!",
          text: "Your Message was sent successfully!",
          icon: "success",
        });
        if (ok.isDismissed || ok.isConfirmed) {
          reset();
        }
      } else {
        await Swal.fire({
          title: "Failure!",
          text: "There was some error. Please try again",
          icon: "error",
        });
      }
    } catch (e) {
      console.log("Error in sending email", e);
      await Swal.fire({
        title: "Failure!",
        text: "There was some error. Please try again",
        icon: "error",
      });
    }
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      <div className="row">
        <div className="form-group col-lg-12 col-md-12 col-sm-12">
          <div className="response"></div>
        </div>
        {/* End .col */}

        <div className="col-lg-12 col-md-12 col-sm-12 form-group">
          <label>Your Name</label>
          <input
            type="text"
            className="username"
            placeholder="Your Name*"
            {...register("name", { required: true })}
          />
          {errors.name && errors.name.type === "required" && (
            <p className="text-danger">Name is required</p>
          )}
        </div>

        <div className="col-lg-12 col-md-12 col-sm-12 form-group">
          <label>Your Email</label>
          <input
            type="email"
            className="email"
            placeholder="Your Email*"
            {...register("email", { required: true })}
          />
          {errors.email && errors.email.type === "required" && (
            <p className="text-danger">Email is required</p>
          )}
        </div>
        {/* End .col */}

        {/* <div className="col-lg-12 col-md-12 col-sm-12 form-group">
                    <label>Subject</label>
                    <input
                        type="text"
                        name="subject"
                        className="subject"
                        placeholder="Subject *"
                        required
                    />
                </div> */}
        {/* End .col */}

        <div className="col-lg-12 col-md-12 col-sm-12 form-group">
          <label>Your Message *</label>
          <textarea
            placeholder="Write your message..."
            {...register("message", { required: true })}
          ></textarea>
          {errors.message && errors.message.type === "required" && (
            <p className="text-danger">Message is required</p>
          )}
        </div>
        {/* End .col */}

        <div className="col-lg-12 col-md-12 col-sm-12 form-group">
          <button
            className="theme-btn btn-style-one"
            type="submit"
            id="submit"
            name="submit-form"
          >
            Send Message
          </button>
        </div>
        {/* End .col */}
      </div>
    </form>
  );
};

export default ContactForm;