import React, { useState } from "react";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/solid";
import styles from "./witness.module.scss";

interface PaginateProps {
  nPages: number;
  currentPage: number;
  setCurrentPage: (page: number) => void;
  geCommentsList: (index: number) => void;
}

const Paginate: React.FC<PaginateProps> = ({
  nPages,
  currentPage,
  setCurrentPage,
  geCommentsList,
}) => {
  const [hoveredPage, setHoveredPage] = useState<number | null>(null);

  const handleMouseEnter = (pageNumber: number) => {
    setHoveredPage(pageNumber);
  };

  const handleMouseLeave = () => {
    setHoveredPage(null);
  };

  const nextPage = () => {
    if (currentPage + 1 <= nPages) {
      setCurrentPage(currentPage + 1);
      geCommentsList(currentPage + 1);
    }
  };

  const changePage = (pages: number) => {
    setCurrentPage(pages);
    geCommentsList(pages);
  };

  const prevPage = () => {
    if (currentPage - 1 >= 1) {
      setCurrentPage(currentPage - 1);
      geCommentsList(currentPage - 1);
    }
  };

  const renderPageNumbers = () => {
    const pageNumbers = [];

    if (nPages <= 8) {
      pageNumbers.push(...Array.from({ length: nPages }, (_, i) => i + 1));
    } else if (currentPage <= 4) {
      pageNumbers.push(...Array.from({ length: 5 }, (_, i) => i + 1));
      pageNumbers.push(null);
      pageNumbers.push(nPages);
    } else if (currentPage > nPages - 4) {
      pageNumbers.push(1);
      pageNumbers.push(null);
      pageNumbers.push(...Array.from({ length: 5 }, (_, i) => nPages - 4 + i));
    } else {
      pageNumbers.push(1);
      pageNumbers.push(null);
      pageNumbers.push(
        ...Array.from({ length: 5 }, (_, i) => currentPage - 2 + i)
      );
      pageNumbers.push(null);
      pageNumbers.push(nPages);
    }

    return pageNumbers.map((pgNumber, index) => (
      <p
        key={index}
        className={pgNumber === null ? "" : styles.page}
        onClick={() =>
          pgNumber !== null ? changePage(pgNumber as number) : null
        } // Ajout de "as number" pour indiquer au compilateur que pgNumber est de type number
        onMouseEnter={() => handleMouseEnter(pgNumber as number)} // Ajout de "as number" pour indiquer au compilateur que pgNumber est de type number
        onMouseLeave={handleMouseLeave}
        style={{
          backgroundColor:
            currentPage === pgNumber
              ? "rgb(136, 154, 233)"
              : hoveredPage === pgNumber
              ? "#ddd"
              : "",
          color: currentPage === pgNumber ? "white" : "black",
          cursor: currentPage === pgNumber ? "" : "pointer",
          float: "left",
          padding: "2px 8px",
          marginLeft: "8px",
          marginRight: "8px",
          textDecoration: "none",
          borderRadius: "5px",
        }}
      >
        {pgNumber === null ? "..." : pgNumber}
      </p>
    ));
  };

  return (
    <>
      {nPages > 1 ? (
        <div>
          <div className="w-auto flex mt-2 sm:mt-0 py-2 px-2 sm:px-10 justify-between items-center bg-blue-50 rounded-md">
            <div
              className={`px-1.5 py-1 mt-0.5 rounded-lg ${
                currentPage === 1 ? "cursor-not-allowed" : "cursor-pointer"
              } ${currentPage === 1 ? "" : "bg-blue-400"}`}
              onClick={prevPage}
            >
              <ArrowLeftIcon className="block h-3 w-3" aria-hidden="true" />
            </div>
            {renderPageNumbers()}
            <div
              className={`px-1.5 py-1 mt-0.5 rounded-lg ${
                currentPage === nPages ? "cursor-not-allowed" : "cursor-pointer"
              } no-underline ${currentPage === nPages ? "" : "bg-blue-400"}`}
              onClick={nextPage}
            >
              <ArrowRightIcon className="block h-3 w-3" aria-hidden="true" />
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
};

export default Paginate;