import React from "react";
import emailjs from "@emailjs/browser";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useTranslation } from "react-i18next";

const ContactForm = () => {
  const { t } = useTranslation();

  const notify = () => {
    toast.success(t("contact.toasts.success"));
  };

  const errorToast = () => {
    toast.error(t("contact.toasts.error"));
  };

  const emptyForm = () => {
    toast.warning(t("contact.toasts.empty"));
  };

  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    let isEmpty = Array.from(e.currentTarget.elements).some(
      (input) =>
        (input as HTMLInputElement).type !== "submit" &&
        (input as HTMLInputElement).value.trim() === ""
    );

    if (isEmpty) {
      emptyForm();
      return;
    }

    emailjs
      .sendForm("service_o7kxotj", "template_f30zlog", e.currentTarget, {
        publicKey: "vcSOwPedqkRH3nmr9",
      })
      .then(
        (result) => {
          console.log(result.text);
          notify();
        },
        (error) => {
          console.log(error.text);
          errorToast();
        }
      );

    e.currentTarget.reset();
  };

  return (
    <div className="mt-10 mx-5  lg:mx-0 flex justify-center items-center">
      <form onSubmit={sendEmail} className="w-full md:w-auto">
        <div className="flex flex-col md:flex-row md:gap-3">
          <input
            className="form-input"
            type="text"
            name="user_name"
            placeholder={t("contact.form.name")}
          />
          <input
            className="form-input"
            type="email"
            name="user_email"
            placeholder={t("contact.form.email")}
          />
        </div>
        <div className="flex flex-col md:flex-row md:gap-3">
          <input
            className="form-input"
            type="text"
            name="user_company"
            placeholder={t("contact.form.company")}
          />
          <input
            className="form-input"
            type="number"
            name="user_phone"
            placeholder={t("contact.form.phone")}
          />
        </div>
        <div className="flex flex-col">
          <input
            className="form-input"
            type="text"
            name="user_question"
            placeholder={t("contact.form.question")}
          ></input>

          <textarea
            className="form-input"
            name="message"
            placeholder={t("contact.form.message")}
            rows={6}
          ></textarea>
        </div>

        <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
          <button
            type="submit"
            className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
          >
            {t("contact.form.button")}
          </button>
        </div>

        <ToastContainer
          position="top-center"
          autoClose={5000}
          hideProgressBar
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="dark"
        />
      </form>
    </div>
  );
};

export default ContactForm;