import React, { useEffect, useState, useContext } from "react";
import { useRouter } from "next/router";
import MediaQuery from "react-responsive";
import Footer from "../../components/home/footer/Footer";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import * as CategoryAPI from "../api/category";
import shopConetxt from "../../context/shopConetxt";
import Loading from "../../components/Loading";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import BlogPage from "../../components/blogs/blogPage";
export default function Blogs(props: any) {
  const {
    isProductListLoading,
    setIsProductListLoading,
    isFiltersLoading,
    setIsFiltersLoading,
  } = useContext(shopConetxt);
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);

  const router = useRouter();
  const [breadCrumbData, setBreadCrumbData] = useState("");
  const refreshData = () => router.replace(router.asPath);
  const [pageId, setPageId] = useState<any>([]);
  const [state, setState] = useState({
    isRouteChanging: false,
    loadingKey: 0,
  });
  useEffect(() => {
    setIsFiltersLoading(true);
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
      setIsFiltersLoading(false);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
      setIsFiltersLoading(false);
    });
    setPageId(router?.query?.urlTitle); // Change this line
  }, []);

  return (
    <div>
      <Loading isRouteChanging={state.isRouteChanging} key={state.loadingKey} />
      <MediaQuery maxWidth={768}>
        <MobileHeader />
        
        <BlogPage pageId={pageId}/>
        <MobileFooter page={"product"} />
      </MediaQuery>

      <MediaQuery minWidth={769}>
        <InternalPageHeader
          refreshData={refreshData}
          catagories={category}
          categoryTree={categoryTree}
        />
        <BlogPage pageId={pageId}/>
        <Footer />
      </MediaQuery>
    </div>
  );
}