import animationCharCome from "@/lib/utils/animationCharCome";
import animationWordCome from "@/lib/utils/animationWordCome";
import { useEffect, useRef, useState } from "react";
import { toast } from 'react-hot-toast';

const Contact1 = () => {
  const charAnim = useRef();
  const wordAnim = useRef();
  useEffect(() => {
    animationCharCome(charAnim.current);
    animationWordCome(wordAnim.current);
  }, []);

  const [formData, setFormData] = useState({
    timestamp: new Date().toLocaleString() + "",
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
    sheetId: process.env.NEXT_PUBLIC_CONTACT_SHEET_ID
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      toast.loading('Sending your message to our experts...')
      await fetch("/api/sheets/contacts-sheet", {
        method: "POST",
        body: JSON.stringify(formData),
        headers: {
          "Content-Type": "application/json",
        },
      });
      setFormData({
        timestamp: new Date().toLocaleString() + "",
        name: "",
        email: "",
        phone: "",
        subject: "",
        message: "",
      })
      toast.dismiss();
      toast.success('Our experts have successfully received your message!');
    } catch (error) {
      toast.error('Opps! Something Went Wrong...')
      console.error("Error submitting form:", error);
    }
  };
  return (
    <>
      <section className="contact__area-6">
        <div className="container g-0 line pt-120 pb-110">
          <span className="line-3"></span>
          <div className="row">
            <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
              <div className="sec-title-wrapper">
                <h1 className="sec-title-2 animation__char_come" ref={charAnim}>
                  Let’s get in touch
                </h1>
              </div>
            </div>
            <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
              <div className="contact__text">
                <p>
                  {
                    "We're excited to hear from you and start something special togerter."
                  }
                </p>
              </div>
            </div>
          </div>
          <div className="row contact__btm">
            <div className="col-xxl-5 col-xl-5 col-lg-5 col-md-5">
              <div className="contact__info">
                <h3
                  className="sub-title-anim-top animation__word_come"
                  ref={wordAnim}
                >
                  {"Book your demo now! "}
                </h3>
                <ul>
                  <li>
                    <a href="tel:+201022517849">(+20) 102 - 251 - 7849</a>
                  </li>
                  <li>
                    <a href="mailto:welcome@syncroi.com">welcome@syncroi.com</a>
                  </li>
                  <li>
                    <span>
                      360 Gamal Abd El Nasser Rd, Al Asafra Bahary <br /> Montazah 2, Alexandria, 21909
                    </span>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-xxl-7 col-xl-7 col-lg-7 col-md-7">
              <div className="contact__form">
                <form onSubmit={handleSubmit}>
                  <div className="row g-3">
                    <div className="col-xxl-6 col-xl-6 col-12">
                      <input type="text" name="name" placeholder="Name *" value={formData.name} required onChange={handleChange} />
                    </div>
                    <div className="col-xxl-6 col-xl-6 col-12">
                      <input type="email" name="email" placeholder="Email *" value={formData.email} required onChange={handleChange} />
                    </div>
                  </div>
                  <div className="row g-3">
                    <div className="col-xxl-6 col-xl-6 col-12">
                      <input type="tel" name="phone" placeholder="Phone" value={formData.phone} onChange={handleChange} />
                    </div>
                    <div className="col-xxl-6 col-xl-6 col-12">
                      <input
                        type="text"
                        name="subject"
                        placeholder="Subject"
                        value={formData.subject}
                        onChange={handleChange}
                      />
                    </div>
                  </div>
                  <div className="row g-3">
                    <div className="col-12">
                      <textarea
                        name="message"
                        placeholder="Message *"
                        required
                        value={formData.message}
                        onChange={handleChange}
                      ></textarea>
                    </div>
                  </div>
                  <div className="row g-3">
                    <div className="col-12">
                      <div className="btn_wrapper">
                        <button type="submit" className="wc-btn-primary btn-hover btn-item">
                          <span></span> Send <br />
                          Message <i className="fa-solid fa-arrow-right"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Contact1;