import { Course } from "@/api/cours.api";
import { Avis } from "@/ui/components/formation/avis";
import { Banniere } from "@/ui/components/formation/banniere";
import { ContenuCours } from "@/ui/components/formation/contenu";
import { ResultatsAttendus } from "@/ui/components/formation/description";
import { Instructeur } from "@/ui/components/formation/instructeur";
import { Objectif } from "@/ui/components/formation/objectif";
import { ObjectifGlobal } from "@/ui/components/formation/prerequis";
import { Sidebar } from "@/ui/components/formation/sidebar";
import axios from "axios";

import React from "react";
export const revalidate = 3600;
export async function generateStaticParams() {
  const category = await Course.getCategory();

  const slugs: string[] = category.map(
    (category: { slug: any }) => category.slug
  );
  return slugs;
}

// async function getCour() {
//   // const cours = await Course.getAll();
//   let cours = [];
//   cours = await fetch(
//     "https://www.dashboard.promillys-academy.com/wp-json/learnpress/v1/courses/"
//   ).then((res) => res.json());
//   return cours;
// }

export default async function DetailFormation({
  params,
}: {
  params: { slug: string };
}) {
  const dataCat = await Course.getSingleCategory(params.slug);
  const category = dataCat[0];
  let courTrie: any[];
  const cours = await Course.getAllCourse().then((res) => {
    courTrie = res.filter((item) => item.categories[0].slug === params.slug);
    return courTrie;
  });
  //console.log(cours);
  // const cour: any[] = cours.find(
  //   (item) => item.categories[0].slug === params.slug
  // );


  // const review = await Course.getReview(cour.id);
  // console.log(review);

  // const id = DataFormation.thumbnail.findIndex(
  //   (collection) => collection.slug === params.slug
  // );
  //console.log(JSON.stringify(cour));
  return (
    <>
      <Banniere category={category} />
      <div className="px-10 lg:px-32 bg-gray-50 xl:px-[5%] pt-14 pb-5">
        <div className="flex lg:flex-row flex-col justify-between gap-14 ">
          <div className="flex flex-col lg:w-5/6 order-2 lg:order-1">
            {/* prerequis */}
            <ObjectifGlobal category={category} />
            {/* debut de la section objectif */}
            <Objectif category={category} />
            {/* description de la formation */}
            <ResultatsAttendus category={category} />
            {/* contenu de cours */}
            <div className="border rounded-md bg-white w-full p-5 mt-5">
              <h1 className="text-xl font-bold text-vert_fonce mb-4">
                Thématiques de formation
              </h1>
              <ContenuCours cour={cours} />
            </div>

            {/* Instructeur du cours */}
            {/* <Instructeur cour={cour} />
       
            <Avis review={review} /> */}
          </div>
          <div className="shadow-lg flex h-min flex-col lg:w-max lg:mt-[-300px] order-1 lg:order-2 lg:sticky lg:top-24">
            {/* side bar */}
            <Sidebar category={category} />
          </div>
        </div>
      </div>
    </>
  );
}
