import React, { useContext, useEffect, useState } from "react";
import Footer from "../../components/home/footer/Footer";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import SellerHomePage from "../../components/sellerLanding/sellerHomePage";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import { Skeleton, Spin } from "antd";
import { useMediaQuery } from "react-responsive";
import * as ProductAPI from "../api/sellerHomePageApi";
import { useRouter } from "next/router";
import get from "lodash/get";
import * as CategoryAPI from "../api/category";
import { fetchCatgories } from "../api/categories";
import shopConetxt from "../../context/shopConetxt";

const Seller = (props: any) => {
  const { categoryTreeNested, setCategoryTreeNested } = useContext(shopConetxt);
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const [sellerData, setSellerData] = useState<any>({});

  const [sellerId, setSellerId] = useState<any>({});
  const [isDataLoading, setIsDataLoading] = useState(true);
  const [category, setCategory] = useState([]);
  const [categoryTreeFlat, setCategoryTreeFlat] = useState([]);
  // const [categoryTreeNested, setCategoryTreeNested] = useState([]);
  const router = useRouter();

  const refreshData = () => router.replace(router.asPath);

  useEffect(() => {
    const sellerid = router?.query?.id;
    if (sellerid) {
      fetchSellerDetail(sellerid);
      setSellerId(sellerid);
    }
    fetchCatgories({ category_id: 1 }).then((res) =>
      setCategoryTreeNested(get(res, "categories", {}))
    );

    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTreeFlat(res.categories);
    });
  }, [router]);

  const fetchSellerDetail = async (id: any) => {
    ProductAPI.fetchSellerDetails(id).then((res) => {
      if (res) setSellerData(res.data.status);
      setIsDataLoading(false);
    });
    
  };

  return (
    <>
      {isMobile && <MobileHeader />}
      {!isMobile && (
        <InternalPageHeader
          catagories={category}
          categoryTree={categoryTreeFlat}
          refreshData={refreshData}
          style={{ padding: "1em 1em" }}
        />
      )}
      
        <SellerHomePage sellerData={sellerData} sellerId={sellerId} />
   

      {isMobile && <MobileFooter />}
      <Footer />
    </>
  );
};
export default Seller;