"use client";
import {
  faFacebookF,
  faInstagram,
  faLinkedinIn,
  faTiktok,
} from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  Option,
  Select,
  Checkbox,
  Button,
  Textarea,
} from "@material-tailwind/react";
import Input from "@material-tailwind/react/components/Input";
import ReCAPTCHA from "react-google-recaptcha";
import React, { ChangeEvent, FormEvent, useState } from "react";
import { Loading } from "@/ui/loader/loading";
import {toast} from "react-hot-toast";

interface FormData {
  // username: string;
  nom: string;
  prenom: string;
  email: string;
  sujet: string;
  phone_number: string;
  type_formation: string;
  programme_interet: string;
  message: string;
  // phone_number: string;
}
export default function Contact() {
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    nom: "",
    prenom: "",
    email: "",
    phone_number: "",
    sujet: "",
    type_formation: "",
    programme_interet: "",
    message: "",

    // phone_number: "",
  });
  const handleChange = (event: { target: { name: any; value: any } }) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };
  const handleSelectChange = (name: any, value: any) => {
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    const response = await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
      .then((res) => {
        toast.success("Votre mail à bien été transmis");
        return res;
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };
  return (
    <>
      {isLoading && <Loading />}
      <div className="container px-4 mx-auto py-16">
        <div className="flex flex-col lg:flex-row lg:gap-28 gap-10">
          <div className="rounded-lg bg-red-50 lg:w-2/5 p-10 flex flex-col gap-4 shadow-lg">
            <h1 className="text-3xl font-bold"> Informations de Contact</h1>
            <div className="">
              <h5 className="font-bold text-lg text-vert_fonce">
                Localisation
              </h5>
              <p>Vous pouvez faire un tour dans nos locaux</p>
              <p className="font-bold">
                66 Avenue des Champs-Elysées 75008 Paris
              </p>
            </div>
            <div>
              <h5 className="font-bold text-lg text-vert_fonce">
                Adresse Mail
              </h5>
              <p>Nous sommes disponible par mail pour tout besoin</p>
              <p className="font-bold">
                <a href="mailto:contact@bslacademy.fr">contact@bslacademy.fr</a>
              </p>
            </div>
            <div>
              <h5 className="font-bold text-lg text-vert_fonce"> Téléphone</h5>
              <p>
                Vous pouvez nous contacter via mobile de lundi à vendredi de 8h
                à 18h.
              </p>
              <p className="font-bold">
                <a href="tel:+237657910505">+33 07 45 17 37 91</a>
              </p>
            </div>
            <div>
              <h5 className="font-bold text-lg text-vert_fonce">
                Reseaux sociaux
              </h5>
              <div className="flex">
                <a
                  href={"https://www.linkedin.com/company/thebsl-academy/"}
                  target="_blank"
                  className=" flex items-center group hover:bg-jaune_vif transition-all justify-center border rounded-full w-9 h-9"
                >
                  <FontAwesomeIcon
                    className="text-vert_fonce group-hover:text-white "
                    icon={faLinkedinIn}
                  />
                </a>
                <a
                  href={
                    "https://www.facebook.com/profile.php?id=100090582712977"
                  }
                  target="_blank"
                  className=" flex items-center group hover:bg-jaune_vif transition-all justify-center border rounded-full w-9 h-9"
                >
                  <FontAwesomeIcon
                    className="text-vert_fonce group-hover:text-white"
                    icon={faFacebookF}
                  />
                </a>
                <a
                  href={"https://www.instagram.com/"}
                  target="_blank"
                  className=" flex items-center group hover:bg-jaune_vif transition-all justify-center border rounded-full w-9 h-9"
                >
                  <FontAwesomeIcon
                    className="text-vert_fonce group-hover:text-white"
                    icon={faInstagram}
                  />
                </a>
                <a
                  href={"https://www.tiktok.com/"}
                  target="_blank"
                  className=" flex items-center group hover:bg-jaune_vif transition-all justify-center border rounded-full w-9 h-9"
                >
                  <FontAwesomeIcon
                    className="text-vert_fonce group-hover:text-white"
                    icon={faTiktok}
                  />
                </a>
              </div>
            </div>
          </div>

          <div className="rounded-lg lg:w-3/5">
            <h2 className="text-lg font-bold">
              Merci de remplir le formulaire ci-dessous pour nous contacter
              directement
            </h2>
            <br />
            <form
              encType="multipart/form-data"
              action=""
              onSubmit={handleSubmit}
              className="flex flex-col gap-3"
            >
              <div className="flex gap-4">
                <Input
                  name="nom"
                  type="text"
                  label="Noms"
                  required
                  crossOrigin={undefined}
                  onChange={handleChange}
                />
                <Input
                  name="prénom"
                  type="text"
                  label="Prenoms"
                  crossOrigin={undefined}
                  onChange={handleChange}
                />
              </div>
              <div className="flex gap-4">
                <Input
                  name="email"
                  required
                  type="email"
                  placeholder="nom@gmail.com"
                  label="Adresse Email"
                  crossOrigin={undefined}
                  onChange={handleChange}
                />
                <Input
                  name="phone_number"
                  required
                  type="tel"
                  label="Téléphone"
                  placeholder="6 99 99 99"
                  crossOrigin={undefined}
                  onChange={handleChange}
                />
              </div>

              <Input
                name="sujet"
                required
                type="text"
                label="Sujet"
                crossOrigin={undefined}
                onChange={handleChange}
              />
              <Select
                label="Type de formation"
                name="type_formation"
                onChange={(e) => handleSelectChange("type_formation", e)}
              >
                <Option value={"Presentiel"}>En présentiel</Option>
                <Option value={"Distanciel"}>En Distanciel</Option>
              </Select>

              <Textarea
                label="Message"
                required
                name="message"
                onChange={handleChange}
              ></Textarea>
              <Checkbox
                label="Consentement RGPD"
                required
                crossOrigin={undefined}
              />
              {/* <ReCAPTCHA
                size="normal"
                sitekey="6LdqTVwpAAAAANK6NKvzrzijjSomno9ZkrtVmsWp"
              /> */}
              <Button type="submit" className=" bg-vert_fonce" fullWidth>
                Envoyer
              </Button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}