"use client";

import Navbar from "@comp/Navbar/page";
import React, { useContext, useEffect, useState } from "react";
import Footer from "@comp/Footer/page";
import ListProdocts from "@comp/Category/ListProdocts/page";
import FilterCategoryMobile from "@comp/Category/Mobile/FilterCategoryMobile/page";
import FilterCategory from "@comp/Category/FilterCategory/page";
import ListProductsMobile from "@comp/Category/Mobile/ListProductsMobile/page";
import PaginationCategoory from "@comp/Category/PaginationCategoory/page";
import AppContext from "@ctx/AppContext";

export default function page({ params }) {
  // const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product?page=0`);
  // const products = await res.json();
  const CTX = useContext(AppContext);
  const [isChecked, setIsChecked] = useState(false);
  const [selectedBrands, setSelectedBrands] = useState([]);
  const [rangePrice, setRangePrice] = useState([1000, 100]);
  const [isRangePrice, setIsRangePrice] = useState(false);
  const [sortBy, setSortBy] = useState(null);

  const fetchBarnds = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/brand`);
    const brands = await res.json();
    CTX.setBrands(brands);
  };

  useEffect(() => {
    CTX.fetchProducts(params.id);
    fetchBarnds();
  }, []);

  return (
    <>
      <div className=" pb-20">
        <Navbar theme={1} />

        <div className="xs:hidden lg:block">
          <div className="pl-20 pr-10 grid lg:grid-cols-8 xl:grid-cols-5 rtl mt-20  ">
            <FilterCategory
              id={params.id}
              isChecked={isChecked}
              setIsChecked={setIsChecked}
              selectedBrands={selectedBrands}
              setSelectedBrands={setSelectedBrands}
              rangePrice={rangePrice}
              setRangePrice={setRangePrice}
              sortBy={sortBy}
              setIsRangePrice={setIsRangePrice}
              isRangePrice={isRangePrice}
            />
            <ListProdocts
              id={params.id}
              isChecked={isChecked}
              selectedBrands={selectedBrands}
              rangePrice={rangePrice}
              setSortBy={setSortBy}
              sortBy={sortBy}
              isRangePrice={isRangePrice}
            />
          </div>
        </div>

        <div className="xs:block lg:hidden ">
          <FilterCategoryMobile
            id={params.id}
            isChecked={isChecked}
            setIsChecked={setIsChecked}
            selectedBrands={selectedBrands}
            setSelectedBrands={setSelectedBrands}
            rangePrice={rangePrice}
            setRangePrice={setRangePrice}
            sortBy={sortBy}
            setIsRangePrice={setIsRangePrice}
            isRangePrice={isRangePrice}
            setSortBy={setSortBy}
          />
          <ListProductsMobile />
        </div>
      </div>
      <PaginationCategoory />

      <Footer />
    </>
  );
}
