import React, { useState, FC, useEffect } from "react";
import { useRouter } from "next/router";
import ListProductByBrand from "../../components/home/findByBrand/ListProductByBrand/listProductByBrand";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import ShopByBrandHeader from "../../components/home/findByBrand/shopByBrandHeader/shopByBrandHeader";
import { Spin } from "antd";
import MediaQuery from "react-responsive";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import * as CategoryAPI from "../api/category";
import { description, image, url } from "../../mockData/seoConstants";
import SEOHead from "../../components/SEOHead";
export default function shopByBarnd(props: any) {
  const [isDataLoading, setIsDataLoading] = useState(false);
  const [brandName, setBrandName] = useState<any>();
  const [imageUrl, setImageUrl] = 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);
    });
    setBrandName(router?.query?.brand);
    setImageUrl(router?.query?.url);
  }, [router]);

  return (
    <>
    <SEOHead
        title={brandName}
        description={description}
        url={`${url}/shopByBrand`} 
        image={imageUrl}
      />
      {isDataLoading ? (
        <div
          style={{
            width: "100%",
            height: "100vh",
            left: "50%",
            top: "50%",
            position: "absolute",
          }}
        >
          <Spin />
        </div>
      ) : (
        <>
          <MediaQuery maxWidth={768}>
            <div>
              <MobileHeader />
            </div>

            <div style={{ marginTop: "5rem", padding: "1rem" }}>
              <ShopByBrandHeader brandName={brandName} />
            </div>

            <ListProductByBrand />
            <MobileFooter />
          </MediaQuery>
          <MediaQuery minWidth={769}>
            <InternalPageHeader
              catagories={category}
              categoryTree={categoryTree}
              refreshData={refreshData}
              style={{ padding: "1em 1em" }}
            />
            <section style={{ margin: "1em 5em" }}>
              <ShopByBrandHeader brandName={brandName}  brandLogo={imageUrl}/>
              <ListProductByBrand productHeaderTitle = {`Search results for ${brandName} in All Categories`}/>
            </section>
          </MediaQuery>
        </>
      )}
    </>
  );
}