import {
  Pagination as PaginationCn,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { usePathname, useSearchParams } from "next/navigation";

const ProductPagination = ({ totalPages, currentPage = 1, perPage, lang }) => {
  // Calculate the range of pages to display
  const startPage = currentPage;
  const endPage = Math.min(totalPages, currentPage + 2); // Show current page and the next two pages

  const searchParams = useSearchParams();
  const pathname = usePathname();

  // Convert the searchParams object to a URLSearchParams instance
  const currentParams = new URLSearchParams(searchParams?.toString());

  return (
    <PaginationCn className="dir-ltr my-24">
      <PaginationContent className="gap-3">
        {/* previous */}
        {currentPage > 1 && (
          <PaginationItem>
            <PaginationPrevious
              href={`${pathname}?${new URLSearchParams({
                ...Object.fromEntries(currentParams),
                page: (+currentPage - 1).toString(),
                "per-page": perPage,
              })}`}
              className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
            />
          </PaginationItem>
        )}

        {/* start page */}
        {startPage > 1 && (
          <PaginationItem>
            <PaginationLink
              href={`${pathname}?${new URLSearchParams({
                ...Object.fromEntries(currentParams),
                page: "1",
                "per-page": perPage,
              })}`}
              className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
            >
              1
            </PaginationLink>
          </PaginationItem>
        )}

        {/* Ellipsis */}
        {startPage > 2 && (
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
        )}

        {/* pages number */}
        {Array.from(
          { length: endPage - startPage + 1 },
          (_, i) => startPage + i
        ).map((page) => (
          <PaginationLink
            key={page}
            href={`${pathname}?${new URLSearchParams({
              ...Object.fromEntries(currentParams),
              page: page.toString(),
              "per-page": perPage,
            })}`}
            className={`${
              page === currentPage ? "bg-mainBlue text-white" : "bg-gray-100"
            } hover:bg-mainBlue hover:text-white rounded-full duration-300`}
          >
            {page}
          </PaginationLink>
        ))}

        {/* Ellipsis */}
        {endPage < totalPages - 1 && (
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
        )}

        {/* last page */}
        {endPage < totalPages && (
          <PaginationItem>
            <PaginationLink
              href={`${pathname}?${new URLSearchParams({
                ...Object.fromEntries(currentParams),
                page: totalPages,
                "per-page": perPage,
              })}`}
              className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
            >
              {totalPages}
            </PaginationLink>
          </PaginationItem>
        )}

        {/* next */}
        {currentPage < totalPages && (
          <PaginationItem>
            <PaginationNext
              href={`${pathname}?${new URLSearchParams({
                ...Object.fromEntries(currentParams),
                page: (+currentPage + 1).toString(),
                "per-page": perPage,
              })}`}
              className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
            />
          </PaginationItem>
        )}
      </PaginationContent>
    </PaginationCn>
  );
};

export default ProductPagination;

// import {
//   Pagination as PaginationCn,
//   PaginationContent,
//   PaginationEllipsis,
//   PaginationItem,
//   PaginationLink,
//   PaginationNext,
//   PaginationPrevious,
// } from "@/components/ui/pagination";

// const ProductPagination = ({ totalPages, currentPage = 1, perPage, lang }) => {
//   console.log("pppppppppppp", totalPages, currentPage, perPage);

//   const staticCurrentPage = currentPage;

//   return (
//     <PaginationCn className="dir-ltr my-24">
//       <PaginationContent className="gap-3">
//         {/* previous */}
//         {currentPage > 1 && (
//           <PaginationItem>
//             <PaginationPrevious
//               href={`/${lang}/products?page=${
//                 +currentPage - 1
//               }&per-page=${perPage}`}
//               className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
//             />
//           </PaginationItem>
//         )}

//         {/* pages number */}

//         <PaginationItem>
//           {/* {Array.from({ length: totalPages ?? 1 }, (_, i) => i + 1).map( */}
//           {Array.from({ length: 10 }, (_, i) => i + 1).map((page) => {
//             if (10 > staticCurrentPage+(10-page)) {
//                 console.log(staticCurrentPage)
//               return (
//                 <PaginationLink
//                   key={page}
//                   href={`/${lang}/products?page=${
//                     currentPage + page - 1
//                   }&per-page=${perPage}`}
//                   className={`${
//                     page === currentPage - 1 ? "bg-mainBlue" : "bg-gray-100"
//                   } hover:bg-mainBlue hover:text-white rounded-full duration-300`}
//                 >
//                   {currentPage + page - 1}
//                 </PaginationLink>
//               );
//             }
//             return null;
//           })}
//         </PaginationItem>

//         {/* Ellipsis */}
//         {currentPage && totalPages && currentPage < totalPages - 5 && (
//           <PaginationItem>
//             <PaginationEllipsis />
//           </PaginationItem>
//         )}

//         {/* last page */}
//         {currentPage && totalPages && currentPage < totalPages - 4 && (
//           <PaginationItem>
//             <PaginationLink
//               href={`/${lang}/products?page=${totalPages}&per-page=${perPage}`}
//               className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
//             >
//               {totalPages}
//             </PaginationLink>
//           </PaginationItem>
//         )}

//         {/* next */}
//         {totalPages !== currentPage && (
//           <PaginationItem>
//             <PaginationNext
//               href={`/${lang}/products?page=${
//                 +currentPage + 1
//               }&per-page=${perPage}`}
//               className="bg-gray-100 hover:bg-mainBlue hover:text-white rounded-full duration-300"
//             />
//           </PaginationItem>
//         )}
//       </PaginationContent>
//     </PaginationCn>
//   );
// };

// export default ProductPagination;