import React, { useState, FC, useEffect } from "react";
import { useMediaQuery } from "react-responsive";
import { Spin } from "antd";
import { useRouter } from "next/router";
import InternalPageHeader from "../../../components/internalPageHeader/InternalPageHeader";
import MobileFooter from "../../../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../../../components/home/mobile/mobileHeader/MobileHeader";
import SellerDetailsMobile from "../../../components/sellerLanding/sellerDetails/sellerDetailsMobile";
import * as ProductAPI from "../../../pages/api/sellerHomePageApi";
import * as CategoryAPI from "../../api/category";
import SellerProducts from "../../../components/sellerLanding/sellerProductCategory/sellerProducts/sellerProducts";

const sellerProducts = (props:any) => {
  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  const [isDataLoading, setIsDataLoading] = useState(true);
  const [productHeaderTitle, setProductHeaderTitle] = useState<any>("");
  const [sellerId, setsellerId] = useState<any>("");
  const [sellerData, setSellerData] = useState<any>({});
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const router = useRouter();
  const refreshData = () => router.replace(router.asPath);

  useEffect(() => {

    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });

    fetchSellerDetails(router?.query?.sellerid);
    setsellerId(router?.query?.sellerid);
    setProductHeaderTitle(router?.query?.name)
    
  }, [router]);

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

  return (
    <>
      {isDataLoading ? (
        <div
          style={{
            width: "100%",
            height: "100vh",
            left: "50%",
            top: "50%",
            position: "absolute",
          }}
        >
          <Spin />
        </div>
      ) : (
        <>
          {isMobile ? (
            <>
              <div style={{ padding: "1em" }}>
                <MobileHeader />
                <SellerDetailsMobile sellerData={sellerData} />
              </div>
            </>
          ) : (
            <>
              <InternalPageHeader
                catagories={category}
                categoryTree={categoryTree}
                refreshData={refreshData}
                style={{ padding: "1em 1em" }}
              />
            </>
          )}
          <div className="m-2 flex" style={{ padding: "1em" }}>
            <div
              className="rightContainer"
              style={{ width: "100%" }}
            >
              <SellerProducts
                sellerId={sellerId}
                sellerData={sellerData}
                productHeaderTitle= {productHeaderTitle}
                
              />
            </div>
          </div>
          {isMobile && <MobileFooter />}
        </>
      )}
    </>
  );
};
export default sellerProducts;