"use client";
import {
  Input,
  Select,
  Textarea,
  Checkbox,
  Button,
} from "@material-tailwind/react";
import { useParams, useSearchParams } from "next/navigation";
import React, { FormEvent, useState } from "react";
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 Page() {
  const param = useParams();
  const searchParam = useSearchParams();
  const them = searchParam.get("thematique");
  const category = searchParam.get("cat");

  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 (
    <>
      <div className="container mx-auto p-10">
        <div className="flex flex-col gap-4">
          <h1 className="text-3xl font-bold text-white bg-vert_fonce p-5 text-center">
            Formulaire d'Inscription
          </h1>
          <div className="text-xl">
            Formation: <b>{them}</b>
          </div>
          <div className="text-xl">
            Catégorie: <b>{category}</b>
          </div>
          <div className="text-xl">
            Prix: <b>1300 € </b>
          </div>
        </div>
        <div className="bg-gray-200 mt-2 shadow-md p-5 flex flex-col justify-center">
          <h2 className="text-xl font-bold text-center">
            Merci de remplir le formulaire ci-dessous pour démarrer votre
            inscription.
          </h2>
        </div>
        <div className=" p-10 border-2">
          <form
            encType="multipart/form-data"
            action=""
            onSubmit={handleSubmit}
            className="flex flex-col gap-3"
          >
            <div className="md:flex-row flex flex-col 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="md:flex-row flex flex-col 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"
                crossOrigin={undefined}
                onChange={handleChange}
              />
            </div>

            <Input
              name="sujet"
              required
              type="text"
              label="Sujet"
              crossOrigin={undefined}
              onChange={handleChange}
            />

            <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>
              Soumettre le formulaire
            </Button>
          </form>
        </div>
      </div>
    </>
  );
}