import { Collapse } from "antd";
import { FC, useEffect, useState } from "react";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import { baseUrl } from "../constants/urls";
import* as CommonApi from "./api/common";
import { useRouter } from "next/router";
import cx from "classnames";
import styles from "./faq.module.scss";
import Footer from "../components/home/footer/Footer";
import FAQData from "../mockData/faqData";
import MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
const seoData = seoDataMap['tracking'];

const { Panel } = Collapse;
const Tracking:FC<any> =()=>{
    const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const router = useRouter();
  const [stateArray,setStateArray] = useState([]);
  useEffect(() => {
    CommonApi.getRequest(`${baseUrl}/api/root-categories-list`).then((res) => {
      setCategory(res.data);
    });
    CommonApi.getRequest(`${baseUrl}/api/categories-tree-view`).then((res) => {
      setCategoryTree(res.data.categories);
    });
    CommonApi.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
      setStateArray(res?.data)
    })
  }, [router]);

    return(
      <>
        <SEOHead {...seoData} />
        <MediaQuery maxWidth={768}>
		<MobileHeader stateArray={stateArray}/>
        </MediaQuery>
        <MediaQuery minWidth={767.98} >
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray}/>
        </MediaQuery>
        <iframe
        sandbox="allow-scripts allow-same-origin"
        src={`${router?.query?.tracking_url}#toolbar=0`}
			height={700}
          width="100%"
          style={{border: 'none'}}
        ><h1>Loading</h1></iframe>
        <Footer stateArray={stateArray}/>
        <MediaQuery maxWidth={768}>
				<MobileFooter stateArray={stateArray}/>
        </MediaQuery>
        </>
        )
    }
    export default Tracking;