"use client";
import { useEffect, useState } from "react";
import { useTranslation } from "../../app/i18n";
import styles from "./witness.module.scss";
import {
  RootLayoutProps,
  TranslationFunction,
  resultComment,
} from "./type";
import Paginate from "./pagination";
import { WitnessResults } from "./type";
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/24/solid";
export default function Witness({ params: { lng } }: RootLayoutProps) {
  const [t, setT] = useState<TranslationFunction | null>(null);
  const [i18n, setI18n] = useState(null);
  const [comments, setComments] = useState<resultComment[]>([]);
  const [witness, setWitness] = useState<WitnessResults[]>([]);
  const [displayPerPage, setDisplayPerPage] = useState<number>(3);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [numberPage, setNumberPage] = useState<number>(0);
  const [activeIndex, setActiveIndex] = useState(0);

  const indexOfLast = currentPage * displayPerPage;
  const indexOfFirst = indexOfLast - displayPerPage;

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(lng, "second-page");
      setT(() => t);
      setI18n(i18n);
    };

    const fetchWitness = async () => {
      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/getWitness/${lng}/${indexOfFirst}?pageSize=3`
        );

        const jsonData = await response.json();
        setWitness(jsonData?.results);
        setNumberPage(jsonData.pagination.pageCount);
      } catch (error) {
        console.error("Failed to get the witness data:", error);
      }
    };

    fetchData();
    fetchWitness();
  }, [lng]);


  async function geCommentsList(value: any) {
    const comments = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/getWitness/${lng}/${value}`
    );

    const jsonComments = await comments.json();
    setWitness(jsonComments.results);
  }

  if (!t || !i18n) {
    return null;
  }

  return (
    <>
      <div className="w-full">
        <div className="ml-8 my-12 pt-5">
          {lng === "fr" ? (
            <div className="ml-1 grid">
              <div className="ml-5 w-4 h-1 font-arial bg-gray-950 dark:bg-white"></div>
              <div className="flex sm:grid mx-5">
                <h1 className={`${styles.title_witness} font-bold text-2xl text-gray-900 mb-1 dark:text-white`}>
                  {t("witness.title_one")}
                </h1>
                <h1 className={styles.witness_title_fr}>
                  {t("witness.title_two")}
                </h1>
              </div>
            </div>
          ) : (
            <div className="ml-1 grid">
              <div className="w-5 ml-5 h-1.5 font-arial bg-gray-950"></div>
              <h1 className={styles.witness_title_en}>{t("witness.title")}</h1>
            </div>
          )}
        </div>
     
        <div className="w-full flex flex-wrap lg:mt-2 justify-between md:mr-6 lg:mr-16">
          <div className="w-1/3 min-w-0 pl-8 grid">
      
            <div className="w-20 md:ml-5 sm:w-auto ">
              {witness &&
                witness.length > 0 &&
                witness.map((anObjectMapped: WitnessResults, index: number) => {
                  return (
                    <div
                      key={anObjectMapped.id}
                      tabIndex={0}
                      className={`dark:bg-slate-900 grid sm:flex justify-center sm:justify-normal rounded-md mb-1 sm:mb-0 sm:my-4 sm:py-3 sm:mr-3 z-50 ${
                        activeIndex === index ? "bg-white" : ""
                      } hover:bg-white dark:hover:bg-black hover:shadow-lg hover:translate-x-1 focus:translate-x-1 focus:shadow-lg focus:bg-white dark:focus:bg-black cursor-pointer`}
                      onClick={() => {
                        setActiveIndex(index);
                      }}
                    >
                      <div
                        className="lg:ml-10 rounded-full sm:ml-3 h-12 mr-0 w-12 mt-2 sm:my-1"
                        style={{
                          backgroundImage: `url(${
                            (anObjectMapped.image?.[0]?.url || "")
                          })`,
                          backgroundSize: "45px 45px",
                        }}
                      ></div>
                      <div className="ml-1 sm:ml-4 md hidden md:block">
                        <h3 className={` ${styles.name} dark:text-white font-bold text-gray-950`}>
                          {anObjectMapped.name}
                        </h3>
                        <p className={` ${ styles.otherInfo} dark:text-white  text-sm md:text-lg text-gray-900`}>
                          {anObjectMapped.otherInfo}
                        </p>
                      </div>
                    </div>
                  );
                })}
            </div>
         
          </div>
          <div className=" dark:bg-slate-900 w-2/3 min-w-0 mx-0">
            {witness &&
              witness.length > 0 &&
              witness.map((item: WitnessResults, index: number) => (
                <div key={index} className={` dark:bg-slate-900 smd:mr-20 max-h-96 overflow-y-auto ${index === activeIndex ? "bg-white" : "hidden"}`}>
                  <div className="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
                      <figure className="max-w-screen-md mx-auto">
                          <svg className="h-12 mx-auto mb-3 text-gray-400 dark:text-gray-600" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z" fill="currentColor"/>
                          </svg> 
                          <blockquote>
                              <p className="text-2x font-medium text-gray-900 dark:text-white">"{item.comments}"</p>
                          </blockquote>
                          <figcaption className="flex items-center justify-center mt-6 space-x-3">
                              <img className="w-6 h-6 rounded-full" src={item.image?.at(0)?.url} />
                              <div className="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
                                  <div className="pr-3 font-medium text-gray-900 dark:text-white">{item.name}</div>
                                  <div className="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">{item.otherInfo}</div>
                              </div>
                          </figcaption>
                      </figure>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </>
  );
}