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

const ListProdocts = ({
  sortBy,
  rangePrice,
  selectedBrands,
  isChecked,
  id,
  isRangePrice,
}) => {
  const CTX = useContext(AppContext);
  const products = CTX.state.products;

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

  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const sort = (by) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("sortBy", by);
    params.set("page", "0");
    router.push(`${pathname}?${params}`);
  };

  return (
    <div>
      <div className=" px-10 ">
        <div className=" border-b-[1px] border-gray-50 pb-6">
          <div className="flex justify-between">
            <div className="flex">
              <div>
                <p className="mb-0 lg:text-sm xl:text-base"> فیلتر بر اساس :</p>
              </div>

              <div className="flex">
                <div
                  className={`w-fit  rounded-full px-2 mx-2 tr03 ${
                    sortBy == 1 ? "bg-primary-600" : " opacity-60 "
                  }`}
                  onClick={() => sort(1)}
                >
                  <p
                    className={`mb-0 lg:text-sm xl:text-base  ${
                      sortBy == 1 ? "text-white" : ""
                    }`}
                  >
                    پربازدید ترین
                  </p>
                </div>
                <div
                  className={`w-fit  rounded-full px-2 mx-2 tr03 ${
                    sortBy == 2 ? "bg-primary-600" : " opacity-60 "
                  }`}
                  onClick={() => sort(2)}
                >
                  <p
                    className={`mb-0 lg:text-sm xl:text-base  ${
                      sortBy == 2 ? "text-white" : ""
                    }`}
                  >
                    محبوب ترین
                  </p>
                </div>
                <div
                  className={`w-fit  rounded-full px-2 mx-2 tr03 ${
                    sortBy == 3 ? "bg-primary-600" : " opacity-60 "
                  }`}
                  onClick={() => sort(3)}
                >
                  <p
                    className={`mb-0 lg:text-sm xl:text-base  ${
                      sortBy == 3 ? "text-white" : ""
                    }`}
                  >
                    گران ترین
                  </p>
                </div>
                <div
                  className={`w-fit  rounded-full px-2 mx-2 tr03 ${
                    sortBy == 4 ? "bg-primary-600" : " opacity-60 "
                  }`}
                  onClick={() => sort(4)}
                >
                  <p
                    className={`mb-0 lg:text-sm xl:text-base  ${
                      sortBy == 4 ? "text-white" : ""
                    }`}
                  >
                    ارزان ترین
                  </p>
                </div>
                <div
                  className={`w-fit  rounded-full px-2 mx-2 tr03 ${
                    sortBy == 5 ? "bg-primary-600" : " opacity-60 "
                  }`}
                  onClick={() => sort(1)}
                >
                  <p
                    className={`mb-0 lg:text-sm xl:text-base  ${
                      sortBy == 5 ? "text-white" : ""
                    }`}
                  >
                    پرفروش ترین
                  </p>
                </div>
              </div>
            </div>

            <div className="">
              <p className="mb-0 text-base lg:text-sm xl:text-base">
                <PersianNumber
                  number={pager?.totalItems}
                  style="text-[16px] mx-2 font-bold"
                />
                کالا
              </p>
            </div>
          </div>
        </div>

        <div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5">
          {products?.map((e, index) => (
            <CardCategories key={index} data={e} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default ListProdocts;
