import MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import Footer from "../components/home/footer/Footer";
import PaymentContainer from "../components/CheckoutPage/PaymentContainer";
import { FC, useContext, useEffect, useState } from "react";
import * as CategoryAPI from "./api/category";
import CheckoutPageHeader from "../components/internalPageHeader/CheckoutPageHeader";
import _ from "lodash";
import * as CartApi from "./api/cart";
import shopConetxt from "../context/shopConetxt";
import { baseUrl } from "../constants/urls";
import * as commonAPI from "./api/common";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['payment'];
const PaymentPage:FC<any> = () => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    categoryTreeNested,
    setCategoryBreadcrumb,
    setCategoryTreeNested,
    wishlist,
    setWishlistItems,
  } = useContext(shopConetxt);
  const [category, setCategory] = useState([]);
	const [categoryTree, setCategoryTree] = useState([]);
  const [cartItemCount, setCartItemCount] = useState<number>(0);
  const [productInvoice, setProductInvoice] = useState({});
  const [stateArray,setStateArray] = useState([]);
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
			setCategory(res);
		  });
		  CategoryAPI.fetchCategoryTree().then((res) => {
			setCategoryTree(res.categories);
		  });
      commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
        setStateArray(res?.data)
      })
      const val: any = localStorage.getItem("loginDetails");
      const details = JSON.parse(val);
      const tokenData: any = !_.isEmpty(details) ? details.token : null;
      CartApi.cartFetch(tokenData).then((res) => {
        setProductInvoice(res?.data);
         if (cart.length == 0) {
          setCartItemCount(res?.data?.items?.length);
           setCartItems(res?.data);
          
         }
      });
    },[]);
  return (
    <div className="pt-1">
      <SEOHead {...seoData} />

      <MediaQuery maxWidth={768}>
        <MobileHeader stateArray={stateArray}/>
      </MediaQuery>
      <MediaQuery minWidth={769}>
     <CheckoutPageHeader productInvoice={productInvoice} stateArray={stateArray}/>
      </MediaQuery>
      {/* hero component */}
      <div className="del-info-content">
        <PaymentContainer productInvoice={productInvoice}/>
      </div>
      <MediaQuery maxWidth={768}>
        <MobileFooter stateArray={stateArray}/>
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <Footer stateArray={stateArray}/>
      </MediaQuery>
    </div>
  );
};

export default PaymentPage;