"use client";
import CardCategories from "@comp/Cards/CardCategories/page";
import AppContext from "@ctx/AppContext";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";

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

  console.log("products", products);

  useEffect(() => {
    CTX.fetchProducts(
      id,
      selectedBrands,
      isChecked,
      rangePrice,
      rangePrice,
      sortBy,
      isRangePrice
    );
  }, [sortBy]);

  return (
    <div className="lg:col-span-6 xl:col-span-4 ">
      <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={() => setSortBy(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={() => setSortBy(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={() => setSortBy(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={() => setSortBy(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={() => setSortBy(5)}
                >
                  <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={12354}
                  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 && products.map((e) => <CardCategories data={e} />)}</>
        </div>
      </div>
    </div>
  );
};

export default ListProdocts;
