import { useGetCategories } from "@/utils/api";
import ThemeOptionContext from "@/context/themeOptionsContext";
import Loader from "@/layout/loader";
import Breadcrumbs from "@/utils/commonComponents/breadcrumb";
import { useCustomSearchParams } from "@/utils/hooks/useCustomSearchParams";
import { useContext, useEffect, useState } from "react";
import CollectionLeftSidebar from "../collection/collectionLeftSidebar";

const ShopMainPage = () => {
  const { isLoading } = useContext(ThemeOptionContext);
  const [filter, setFilter] = useState({
    category: [],
    brand: [],
    price: [],
    color: [],
    attribute: [],
    rating: [],
    on_sale: false,
    page: 1,
    sortBy: "asc",
    field: "created_at",
  });
  const [brand, color, attribute, price, rating, sortBy, field, layout, page, on_sale] =
    useCustomSearchParams([
      "brand",
      "color",
      "attribute",
      "price",
      "rating",
      "sortBy",
      "field",
      "layout",
      "page",
      "on_sale",
    ]);
  useEffect(() => {
    setFilter((prev) => {
      return {
        ...prev,
        page: page ? page?.page : 1,
        brand: brand ? brand?.brand?.split(",") : [],
        color: color ? color?.color?.split(",") : [],
        attribute: attribute ? attribute?.attribute?.split(",") : [],
        price: price ? price?.price?.split(",") : [],
        rating: rating ? rating?.rating?.split(",") : [],
        on_sale: on_sale ? on_sale?.on_sale === "true" : false,
        sortBy: sortBy ? sortBy?.sortBy : "asc",
        field: field ? field?.field : "created_at",
      };
    });
  }, [brand, color, attribute, price, rating, sortBy, field, page, on_sale]);

  return (
    <>
      <Breadcrumbs title={`Shop`} subNavigation={[{ name: "Shop" }]} />
      <CollectionLeftSidebar
        filter={filter}
        setFilter={setFilter}
        hideCategory
      />
    </>
  );
};

export default ShopMainPage;