import { FC, useEffect, useState } from "react";
import * as CategoryAPI from "./api/category";
import MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import Footer from "../components/home/footer/Footer";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import RFQContainer from "../components/rfqContainer/RFQContainer";
import * as ProfileApi from "./api/profile";
import { isEmpty } from "lodash";
import OTPModal from "../components/modal/otpModal/OTPModal";
import * as commonAPI from "./api/common";
import { baseUrl } from "../constants/urls";
import { seoDataMap } from "../mockData/seoData";
import SEOHead from "../components/SEOHead";
const seoData = seoDataMap['rfq'];

const RFQ: FC<any> = () => {
    const [category, setCategory] = useState([]);
    const [categoryTree, setCategoryTree] = useState([]);
    const [loginRes, setLoginRes] = useState<any>({});
    const [userData, setUserData] = useState<any>({});
    const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
    const [stateArray,setStateArray] = useState([]); 
    useEffect(() => {
        const val: any = localStorage.getItem("loginDetails");
        const details = JSON.parse(val);
        setLoginRes(details);
        const params = details?.token;
        if(isEmpty(details)){
            setIsOTPModalVisible(true); 
        }
        CategoryAPI.fetchCategory().then((res) => {
            setCategory(res);
        });
        CategoryAPI.fetchCategoryTree().then((res) => {
            setCategoryTree(res.categories);
        });
        
        ProfileApi.getProfile(params).then((data) => setUserData(data));
        commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
            setStateArray(res?.data)
          })
    }, []);
    return (
        <>
            <SEOHead {...seoData} />

            <MediaQuery maxWidth={768}>
                <MobileHeader  stateArray={stateArray}/>
            </MediaQuery>
            <MediaQuery minWidth={769}>
                <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray}/>
            </MediaQuery>
            <RFQContainer profile={userData}/>
            <Footer />
            <MediaQuery maxWidth={768}>
                <MobileFooter stateArray={stateArray} />
            </MediaQuery>
            <OTPModal
        page={"rfq"}
        handleOTPClose={() => {isEmpty(loginRes)?null:
          setIsOTPModalVisible(false);
        }}
        stateArray={stateArray}
        isOTPModalVisible={isOTPModalVisible}
      />
        </>
    )
}

export default RFQ;