import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import SideBar from "../../components/customerDashboard/sidebar/sidebar";
import Dashboard from "../../components/customerDashboard/dashboard/dashboard";
import content from "../../mockData/sidebarData";
import { FC, useContext, useState } from "react";

import MediaQuery, { useMediaQuery } from "react-responsive";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import MyProfileForm from "../../components/customerDashboard/myProfileForm/myProfileForm";
import MyQuotation from "../../components/customerDashboard/myQuotation/myQuotation";
import MyOrdersList from "../../components/customerDashboard/myOrders/myOrdersList";
import AddressBookCards from "../../components/customerDashboard/addressBook/addressBook";
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as CategoryAPI from "../api/category";
import MyWishList from "../../components/customerDashboard/wishlist/MyWishList";
import ChangePassword from "../../components/customerDashboard/changePassword/ChangePassword";
import InvoiceList from "../../components/customerDashboard/invoice/InvoiceList";
import EditQuotePage from "../../components/customerDashboard/myQuotation/EditQuotePage";
import Footer from "../../components/home/footer/Footer";
import ManageWarranty from "../../components/customerDashboard/warranty/warrantyManage";
import Enquiries from "../../components/customerDashboard/enquiries/Enquiries";
import { fetchCatgories } from "../api/categories";
import { get } from "lodash";
import shopConetxt from "../../context/shopConetxt";
import RfqList from "../../components/customerDashboard/rfqList/RfqList";
import RFQQuotation from "../../components/customerDashboard/rfqQuotation/RFQQuotation";
import PurchaseOrder from "../../components/customerDashboard/purchaseOrder/PurchaseOrder";
import IndisparePriceComponent from "../../components/customerDashboard/indisparePrice/IndisparePriceComponent";
import * as commonAPI from "../api/common";
import { baseUrl } from "../../constants/urls";
import UserCreation from "../../components/customerDashboard/rolesAndAccess/createUser/UserCreation";
import UserList from "../../components/customerDashboard/rolesAndAccess/createUser/UserList";
import GiftSheetManager from "../../components/customerDashboard/giftSheetManager/GiftSheetManager";
import Head from "next/head";
import NewInvoiceList from "../../components/customerDashboard/newInvoiceList/NewInvoiceList";
import { title } from "process";
import { description,image } from "../../mockData/seoConstants";
import SEOHead from "../../components/SEOHead";

const CustomerDashboard: FC<any> = (props) => {
  const { categoryTreeNested, setCategoryTreeNested } = useContext(shopConetxt);
  const router = useRouter();
  const [pageName, setPageName] = useState("");
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const [stateArray,setStateArray] = useState([]);
  const onClickHandler = (item: any) => {
   
    setPageName(item.name);
    setTimeout(() => {
      if(item.name == "Indispare Rate"){
        router.push("/indispareRate");
      }else{
        
       window.history.replaceState('', '', `customerDashboard?val=`+item.name.replace(/ /g, '+'));
      }
    //   router.push({
    //     pathname: '/customerDashboard/customerDashboard',
    //     query: { val: item.name }
    // },undefined, { shallow: true })
    }, 10);
 
    
  };
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
    fetchCatgories({ category_id: 1 }).then((res) =>
    setCategoryTreeNested(get(res, "categories[0]", {}))

  );
    const val: any = router.query.val;

    if (val === undefined) {
      
    } else {
      setPageName(val);
    }
    commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
      setStateArray(res?.data)
    })
  }, [router]);


  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  return (
    <div>
      <SEOHead
        title={pageName}
        description={description}
        url={window.location.href} 
        image={image}
      />
      <MediaQuery maxWidth={767.98}>
        <MobileHeader stateArray={stateArray}/>
      </MediaQuery>
      <MediaQuery minWidth={768}>
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray}/>
      </MediaQuery>
      <div className="TssCustomerSmFlex">
        {!isMobile &&  (
          <SideBar
            onClickHandler={onClickHandler}
            content={content}
            params={pageName}
          />
        )}

        {(pageName === "Dashboard" && <Dashboard />) ||
          (pageName === "My Profile" && <MyProfileForm />) ||
          (pageName === "My Orders" && <MyOrdersList stateArray={stateArray}/>) ||
          (pageName === "My Quotations" && <MyQuotation />) ||
          (pageName === "Address Book" && <AddressBookCards stateArray={stateArray}/>) ||
          (pageName === "My Wishlist" && <MyWishList/>) ||
          (pageName === "Change Password" && <ChangePassword/>) ||
          (pageName === "Invoices List" && <NewInvoiceList />) ||
          (pageName === "Sales Order" && <InvoiceList/>) ||
          (pageName === "Edit Quote" && <EditQuotePage />) ||
          (pageName === "Manage Warranty Products" && <ManageWarranty/>) || 
          (pageName === "Enquiry" && <Enquiries />) ||  
          (pageName === "RFQ List" && <RfqList />) ||
          (pageName === "RFQ Quotations" && <RFQQuotation />) || 
          (pageName === "Purchase Order" && <PurchaseOrder />) ||
          (pageName === "User Management" && <UserList/>) ||
          (pageName === "Gift Sheet Manager" && <GiftSheetManager/>)
          }
      </div>
      <Footer stateArray={stateArray}/>
      {isMobile && <MobileFooter stateArray={stateArray}/>}
    </div>
  );
};

export default CustomerDashboard;