"use client";
import getProducts from "@/app/api-requests/getProducts";
import categories from "@/app/api-requests/categories";
import subCategories from "@/app/api-requests/subcategory";
import { FilterBody } from "@/modules/products/Filter";
import { useEffect, useState } from "react";
import CategoriesNavSlider from "../home/CategoriesNavSlider";
import MotionEl from "../shared/animation/MotionEl";
import FirstProductCard from "./FirstProductCard";
import ProductPagination from "./ProductPagination";
import ProductsFilter from "./ProductsFilter";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { useSearchParams } from "next/navigation";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import LoadingSpinner from "../shared/loadingSpinner/LoadingSpinner";
import { Category } from "@/modules/categories/cateogires";

const ProductsData = () => {
  const searchParams = useSearchParams();
  const categoryId = searchParams.get("categoryId");
  const subcategoryId = searchParams.get("subcategoryId");

  const [filterData, setFilterData] = useState<FilterBody>({});
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(
    null
  );
  const allSubCategories = subCategories();
  const page = +(searchParams.get("page") ?? 1);
  const perPage = +(searchParams.get("per-page") ?? 10);
  const {
    data: productsData,
    isLoading,
    pagination,
    maxPrice,
    minPrice,
  } = getProducts(filterData, page, perPage);
  // get language from hook currentLang
  const { lang } = useCurrentLanguage();
  const data = categories();

  console.log(filterData);
  console.log(searchParams);

  useEffect(() => {
    // get selected category
    const category = data?.find((cat) => cat.id === filterData?.categoryId);
    if (category) {
      setSelectedCategory(category);
    } else {
      setSelectedCategory({ sub_categories: allSubCategories });
    }
  }, [filterData, allSubCategories]);

  useEffect(() => {
    if (categoryId) {
      setFilterData((prevState) => ({ ...prevState, categoryId: +categoryId }));
    }
  }, []);

  useEffect(() => {
    if (subcategoryId) {
      setFilterData((prevState) => ({
        ...prevState,
        subcategoryId: +subcategoryId,
      }));
    }
  }, []);

  return (
    <div className="container py-24">
      <h2 className="text-2xl font-bold">
        <TranslateClient text="products" />
      </h2>
      <CategoriesNavSlider
        btnClassName="bg-mainOffWhite-200"
        filterData={filterData}
        setFilterData={setFilterData}
        categories={data}
      />

      <div className="grid grid-cols-4 gap-8">
        {/* filter */}
        <div className="col-span-4 lg:col-span-1">
          <ProductsFilter
            subCategories={selectedCategory?.sub_categories}
            filterData={filterData}
            setFilterData={setFilterData}
            maxPrice={maxPrice}
            minPrice={minPrice}
          />
        </div>
        {/* products */}
        {isLoading ? (
          <>
            {/* <h4 className="col-span-4 lg:col-span-3 text-center pt-32 text-3xl text-mainBlue animate-pulse">
                            loading
                        </h4> */}
            <div className="col-span-4 lg:col-span-3 text-center  text-3xl text-mainBlue animate-pulse">
              <LoadingSpinner />
            </div>
          </>
        ) : productsData && productsData.length > 0 ? (
          <>
            <div className="col-span-4 lg:col-span-3 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
              {productsData?.map((product, index) => (
                <MotionEl
                  key={product?.id}
                  animationType={index % 2 === 0 ? "left" : "right"}
                  element="div"
                >
                  <FirstProductCard product={product} key={product?.id} />
                </MotionEl>
              ))}
            </div>
          </>
        ) : (
          <h4 className="col-span-3 text-center pt-32 text-3xl text-mainBlue">
            No data found
          </h4>
        )}
      </div>

      {/* pagination */}
      {/* todo fix this check and show pagination when number of pages > 1  and make pagination not return from api with null*/}
      {/* {productsData?.length > 7 ? <Pagination totalPages={pagination?.last_page} lang={lang} /> : null} */}
      <ProductPagination
        totalPages={pagination?.last_page}
        lang={lang}
        currentPage={page}
        perPage={perPage}
      />
    </div>
  );
};

export default ProductsData;