import { FC, useEffect, useState } from "react";
import { Interface } from "readline";
import Footer from "../components/home/footer/Footer";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import * as CategoryAPI from "./api/category";
import MediaQuery from "react-responsive";
import * as GallaryApi from "./api/gallaries";
import BrandsContainer from "../components/brandsContainer/BrandsContainer";
import { baseUrl } from "../constants/urls";
import *as CommonApi from "./api/common";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['brands'];
const Brands: FC<any> = () => {
    const [category, setCategory] = useState([]);
    const [categoryTree, setCategoryTree] = useState([]);
    const [sellerBrands, setSellerBrands] = useState([]);
    const [stateArray,setStateArray] = useState([]);
    useEffect(() => {
        CategoryAPI.fetchCategory().then((res) => {
            setCategory(res);
        });
        CategoryAPI.fetchCategoryTree().then((res) => {
            setCategoryTree(res.categories);
        });
        
        GallaryApi.brandApi().then((res) => {
            if (res) setSellerBrands(res);
        });
        CommonApi.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
            setStateArray(res?.data)
          })
    }, [])


    return (
        <>
                    <SEOHead {...seoData} />

         <MediaQuery minWidth={769}>
            <InternalPageHeader catagories={category}
                categoryTree={categoryTree} stateArray={stateArray}/>
                </MediaQuery>
            <MediaQuery maxWidth={768}>
                <MobileHeader stateArray={stateArray}/>
              
            </MediaQuery>
            <BrandsContainer brandsData={sellerBrands} />
            <Footer stateArray={stateArray}/>
            <MediaQuery maxWidth={768}>
                <MobileFooter stateArray={stateArray}/>
            </MediaQuery>
        </>
    )
}
export default Brands;