"use client";
import AppContext from "@ctx/AppContext";
import PersianNumber from "plugins/PersianNumber";
import { useContext, useState } from "react";

const PaginationCategoory = (props) => {
  const CTX = useContext(AppContext);

  const pager = CTX.state.pager;
  const pageGetProducts = CTX.state.pageGetProducts;

  const [currentPageIndex, setCurrentPageIndex] = useState(pageGetProducts);
  const renderPaginationButtons = () => {
    const buttons = [];
    for (let i = 0; i < pager?.totalPage; i++) {
      buttons.push(
        <div
          key={i}
          className={`w-[25px] h-[25px] rounded-full tr03 bg-${
            currentPageIndex === i ? "secondary-500" : "primary-200"
          } mx-1 cursor-pointer`}
          onClick={() => {
            console.log("ss", i);
            setCurrentPageIndex(i);
            CTX.fetchProducts(
              i,
              props.id[0],
              props.selectedBrands,
              props.isChecked,
              props.rangePrice,
              props.rangePrice,
              props.sortBy,
              props.isRangePrice,
              true //pagination say or not
            );
          }}
        >
          <p className="mb-0 text-center pt-[2px] text-white">
            <PersianNumber number={i + 1} style=" !text-[14px]  " />
          </p>
        </div>
      );
    }
    return buttons;
  };

  return (
    <div className="flex justify-center rtl mb-10">
      <div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
        <svg
          width="13"
          height="13"
          viewBox="0 0 88 151"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-auto mt-[6px] "
        >
          <path
            d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
            stroke="white"
            stroke-width="25"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      {renderPaginationButtons()}
      <div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
        <svg
          width="13"
          height="13"
          viewBox="0 0 88 151"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="mx-auto mt-[6px] rotate-180 "
        >
          <path
            d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
            stroke="white"
            stroke-width="25"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
  );
};

export default PaginationCategoory;
