"use client";
import AppContext from "@ctx/AppContext";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useEffect, useState } from "react";

const PaginationBlogs = ({ totalPage }) => {
  const CTX = useContext(AppContext);
  const searchParams = useSearchParams();
  const pager = totalPage;
  const pathname = usePathname();
  const router = useRouter();
  const [currentPageIndex, setCurrentPageIndex] = useState(
    Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
  );
  useEffect(() => {
    setCurrentPageIndex(
      Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
    );
  }, [searchParams]);
  const renderPaginationButtons = () => {
    const buttons = [];
    const totalPages = pager?.totalPage;
    const maxButtonsToShow = 7; // Maximum buttons to show

    // If total pages are greater than maxButtonsToShow
    if (totalPages > maxButtonsToShow) {
      // Show buttons for the first page
      buttons.push(renderPageButton(0));

      // If current page is not too close to the start, show ellipsis
      if (currentPageIndex > 2) {
        buttons.push(renderEllipsis());
      }

      // Calculate the start index for buttons
      const start = Math.max(1, currentPageIndex - 2);

      // Calculate the end index for buttons
      const end = Math.min(currentPageIndex + 3, totalPages - 1);

      // Show buttons for pages within range
      for (let i = start; i <= end; i++) {
        buttons.push(renderPageButton(i));
      }

      // If current page is not too close to the end, show ellipsis
      if (currentPageIndex < totalPages - 4) {
        buttons.push(renderEllipsis());
      }

      // Show button for the last page
      buttons.push(renderPageButton(totalPages - 1));
    } else {
      // Show buttons for all pages
      for (let i = 0; i < totalPages; i++) {
        buttons.push(renderPageButton(i));
      }
    }

    return buttons;
  };

  const renderPageButton = (pageIndex) => (
    <div
      key={pageIndex}
      className={`w-[25px] h-[25px] rounded-full tr03 bg-${
        currentPageIndex === pageIndex ? "secondary-500" : "primary-200"
      } mx-1 cursor-pointer`}
      onClick={() => handlePageClick(pageIndex)}
    >
      <p className="mb-0 text-center pt-[2px] text-white">
        <PersianNumber number={pageIndex + 1} style=" !text-[14px]  " />
      </p>
    </div>
  );

  const renderEllipsis = () => (
    <div key="ellipsis" className="mx-1">
      ...
    </div>
  );

  const handlePageClick = (pageIndex) => {
    setCurrentPageIndex(pageIndex);
    //
    // CTX.fetchProducts(
    //   pageIndex,
    //   props.id[0] != 0 ? props.id[0] : "",
    //   props.selectedBrands,
    //   props.isChecked,
    //   props.rangePrice,
    //   props.rangePrice,
    //   props.sortBy != -1 ? props.sortBy : "",
    //   props.isRangePrice,
    //   true //pagination say or not
    // );
    const nextPage = pageIndex;

    const params = new URLSearchParams(searchParams.toString());
    params.set("page", nextPage);
    router.push(`${pathname}?${params}`);
    // CTX.setStopProducts(true);
    // Your fetchProducts function call here
  };

  return (
    <div className="flex justify-center rtl mb-10">
      <div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
        {/* Previous page button */}
      </div>
      {renderPaginationButtons()}
      <div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
        {/* Next page button */}
      </div>
    </div>
  );
};

export default PaginationBlogs;