"use client";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const onSubmit = async (data: any) => {
    setIsLoading(true);
    const r = await axios.post(
      "https://fabenapi.vevasoftprojects.com/api/v1/contacts",
      data
    );
    setIsLoading(false);
    setIsSuccess(true);
  };

  return (
    <>
      <div className="contact-2-area pt-60 pb-130">
        <div className="container">
          <div className="row">
            <div className="col-xl-6 col-lg-8 offset-lg-2 offset-xl-3">
              <div className="section-title text-center ml-50 mr-50 mb-75">
                <h3>Bize mail gönderebilirsiniz</h3>
              </div>
            </div>
          </div>
          <div className="col-xl-10 offset-1">
            {isSuccess && (
              <div className="alert alert-success" role="alert">
                Bizimle iletişime geçtiğiniz için teşekkür ederiz.
              </div>
            )}
            {isLoading && (
              <div className="alert alert-success" role="alert">
                <div className="spinner-border mr-2" role="status">
                  <span className="visually-hidden mr-2"></span>
                </div>
                <span className={"ml-2"}> Form gönderiliyor...</span>
              </div>
            )}
            <div className="appointment-wrapper contact-form-page">
              <form
                onSubmit={handleSubmit(onSubmit)}
                action={"post"}
                className="appointment-form"
              >
                <div className="row">
                  <div className="col-lg-4">
                    <div className="form-box user-icon mb-30">
                      <input
                        {...register("nameSurname", { required: true })}
                        type="text"
                        name="nameSurname"
                        placeholder="ad / soyad"
                      />
                      <span>
                        <i className="fas fa-user"> </i>
                      </span>
                      {errors.nameSurname && (
                        <div className="form-error">
                          Ad soyad alanı zorunludur
                        </div>
                      )}
                    </div>
                  </div>
                  <div className="col-lg-4">
                    <div className="form-box email-icon mb-30">
                      <input
                        type="email"
                        {...register("email", { required: true })}
                        name="email"
                        placeholder="email"
                      />
                      <span>
                        <i className="fas fa-envelope"> </i>
                      </span>
                      {errors.email && (
                        <div className="form-error">Email alanı zorunludur</div>
                      )}
                    </div>
                  </div>
                  <div className="col-lg-4">
                    <div className="form-box date-icon mb-30">
                      <input
                        type="number"
                        {...register("subject", { required: true })}
                        name="phone"
                        placeholder="telefon"
                      />
                      <span>
                        <i className="fas fa-phone"> </i>
                      </span>
                      {errors.subject && (
                        <div className="form-error">Konu alanı zorunludur</div>
                      )}
                    </div>
                  </div>
                  <div className="col-lg-12">
                    <div className="form-box message-icon mb-30">
                      <textarea
                        {...register("message", { required: true })}
                        name="message"
                        id="message"
                        cols={30}
                        rows={10}
                        placeholder="mesajınız"
                      ></textarea>
                      <span>
                        <i className="fas fa-pencil-alt"> </i>
                      </span>
                      {errors.message && (
                        <div className="form-error">Mesaj alanı zorunludur</div>
                      )}
                    </div>
                    <div className="contact-btn contact-2-btn text-center">
                      <button className="btn" type="submit">
                        <span className="btn-text">
                          Gönder{" "}
                          <i className="fas fa-long-arrow-alt-right"> </i>
                        </span>{" "}
                        <span className="btn-border"></span>
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ContactForm;