"use client";
import React, { useCallback, useEffect, useState } from "react";
import { DataFormation } from "@/api/data-formation.api";
import { CardFormation } from "@/ui/components/formation/card-formation";
import Image from "next/image";
import { Transition } from "@headlessui/react";
import splitDate from "@/lib/split-date";
import { useFormData } from "@/context/provider";
import { Formation } from "@/types/formation";
import { redirect, useRouter } from "next/navigation";
import { Course } from "@/api/cours.api";
import { CardCatFormation } from "@/ui/components/formation/card-cat-formation";
import { Loading } from "@/ui/loader/loading";
import { Skeleton } from "@/ui/loader/skeleton";
import { Spinner } from "@material-tailwind/react";

export default function  FormationList() {
  const [categorieSelectionnee, SetCategorieSelectionnee] = useState("Tous");
   const cours = DataFormation.thumbnail;
   const[cour,setCour] = useState([]);
   const[category, setCategory] = useState([]);

   useEffect(()=>{
    const getData = async()=>{
      const res = await Course.getAllCourse();
      setCour(res);
    };
    const getCourseCat = async() =>{
      const res = await Course.getCategory();
      setCategory(res);
     // console.log(res);
    }
    getCourseCat();
    getData();
   },[])



const formationsParCategorie = {};

category.forEach((categorie) => {
  formationsParCategorie[categorie.name] = {
    image: categorie.acf.image_categorie,
    nom: categorie.name,
    slug:categorie.slug,
    formations: [],
  };
});
cour.forEach((formation) => {
  formationsParCategorie[formation.categories[0]?.name]?.formations.push(formation);
});

  const coursFiltres =
    categorieSelectionnee === "Tous"
      ? cour
      : cour && cour.filter((c) => c.categories[0].name === categorieSelectionnee);

  return (
    <>
      <div className="flex flex-col bg-[url('/assets/img-bsl/banner.jpg')] bg-center bg-cover h-[300px]">
        <div className="px-32 bg-black h-full flex items-center justify-center bg-opacity-80">
          <div className="flex flex-col gap-2 w-1/2">
            <h1 className="text-5xl font-bold text-center text-white">
              Nos formations
            </h1>
            <p className="text-2xl text-white text-center"></p>
          </div>
        </div>
      </div>
      <div className="bg-gray-100 py-8">
        {/* <div className="flex justify-center pb-8">
          <div className="flex flex-col lg:flex-row gap-5 justify-between items-center xl:w-5/6 md:w-10/12 w-11/12 lg:w-11/12">
            <div>
              <span>
                Nous avons <b>{cour.length}</b> cours disponibles au total
              </span>
            </div>
            <div>
              {categorie.map((cat, index) => (
                <button
                  key={index}
                  className={`bg-gray-50 transition-all text-sm font-bold duration-300 px-4 py-2 rounded-full ${
                    categorieSelectionnee === cat
                      ? "bg-vert_fonce text-white cursor-default"
                      : "hover:bg-yellow-100"
                  } `}
                  onClick={() => SetCategorieSelectionnee(cat)}
                >
                  {cat}
                </button>
              ))}

              <button className="bg-vert_fonce px-3 py-2 text-white rounded-sm inline-flex items-center gap-3 hover:bg-green-950">
                <FontAwesomeIcon icon="filter" className="h-4" />
                Filtre
              </button>
            </div>
          </div>
        </div> */}

        <div className="flex justify-center">
          <div className="grid lg:grid-cols-2 xl:w-5/6 md:w-10/12 w-11/12 lg:w-11/12 gap-10 xl:gap-10 lg:gap-4">
            {formationsParCategorie["ASSURANCES"]?.formations.length >= 1 ? (
              category.map((item, index) => (
                <Transition
                  show={true}
                  appear={true}
                  enter="transition-opacity duration-500"
                  enterFrom="opacity-0"
                  enterTo="opacity-100"
                  leave="transition-opacity duration-150"
                  leaveFrom=""
                  leaveTo="opacity-0"
                  key={index}
                >
                  <CardCatFormation item={formationsParCategorie[item.name]} />
                </Transition>
              ))
            ) : (
              <div className="col-span-3 flex items-center justify-center   ">
                <div className=" border-gray-300 p-10 w-1/2 bg-contain bg-center bg-no-repeat flex justify-start flex-col items-center">
                  {/* <p className="m-auto font-bold text-center text-lg">
                    Aucun cours disponible!
                  </p>
                  <Image
                    src="/assets/images/empty-box.png"
                    height={200}
                    width={200}
                    alt="empty box"
                  /> */}
                  <Spinner className="h-16 w-16 text-gray-900/50" />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}