import React, { useEffect, useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import "../Dashboard/dashboard.css";

import axios from "axios";
import TopNavbar from "./TopNavBar/TopNavbar";
import SideNavbar from "./SideNavBar/SideNavbar";
import Shareholder from "./Shareholder/Shareholder";
import DefaultDashboard from "./DefaultDashboard";
import News from "./News/News";
import Announcement from "./Announcement/Announcement";
import Profile from "./Profile/Profile";
import BonusList from "./Bonus/BonusList";
import Share from "./Share/Share";
import LogoutModal from "./TopNavBar/Logout/LogoutModal";
import BarChart from "../../component/BarChart/BarChart";
import baseUrl from "../../array/base/config";
import NewsDetail from "./News/NewsDetail";
import Certificate from "./ShareCertificate/Certificate";
import Events from "./Events/Events";
import SingleEventPage from "./Events/SingleEventPage";
import CompanyDetailsPage from "./Company/CompanyDetailsPage";
import ShareholderList from "./Sharetransfer/ShareholderList";
import Sharetransfer from "./Sharetransfer/Sharetransfer";
import ApplyShare from "./ApplyShare/ApplyShare";
import ShareContract from "./ShareContract/ShareContract";
import Karanama from "./ShareContract/Karanama";
import Documents from "./Documents/Documents";
import MultiStepForm from "./Sharetransferrequests/MultiStepForm";
import DocumentSinglePage from "./Documents/DocumentSinglePage";
import Report from "./Report/Report";
import ReportSinglePage from "./Report/ReportSinglePage";
import ShareTransfers from "./Sharetransferrequests/ShareTransfers";
import ShareFileSinglePage from "./ShareContract/ShareFileSinglePage";
import AnnouncementSinglePage from "./Announcement/AnnouncementSinglePage";
import PaymentProofForm from "./ShareContract/PaymentProofForm";
import { useGetUser, useGetUserRoles } from "../../apis/User";
import { useMemo } from "react";
import LoadingAnimation from "./Loading/LoadingAnimation";
import Invoice from "./ShareContract/Invoice";
const PageNotFound = React.lazy(() => import("../Pagenotfound"));
const ShareHistory = React.lazy(() => import("./Sharehistory/Sharehistory"));
/**
 * Represents the dashboard  page component.
 * @module Dashboard
 * @return {JSX.Element}
 */
const Dashboard = () => {
  /**
   * State to toggle the logout modal.
   * @type {boolean}
   * @default false
   * @memberof module:Dashboard
   * @name showLogoutMOdal
   */
  const [showLogoutMOdal, setShowLogoutModal] = useState(false);
  /**
   * React  dom hook to navigate to different routes.
   * @memberof module:Dashboard
   * @name navigate
   * @type {NavigateFunction}
   */
  const navigate = useNavigate();
  /**
   * State to toggle the mobile menu.
   * @type {boolean}
   * @default false
   * @memberof module:Dashboard
   * @name mobileMenu
   */
  const [mobileMenu, setMobileMenu] = useState(false);

  useEffect(() => {
    document.body.style.overflowY = "hidden";
  }, []);
  /**
   * React query hook to get user data.
   * @memberof module:Dashboard
   * @name useGetUser
   */
  const { data: userData, isLoading: userLoading } = useGetUser();
  /**
   * React query hook to get user roles and eligibility data.
   * @memberof module:Dashboard
   * @name useGetUserRoles
   */
  const { data: rolesData, isLoading: rolesLoading } = useGetUserRoles();
  /**
   * React memo hook to memoize user data.
   * @memberof module:Dashboard
   * @name user
   * @type {*|{}}
   */
  const user = useMemo(() => {
    const temp = userData?.data?.data || {};
    return temp;
  }, [userData?.data]);
  /**
   * React memo hook to memoize user roles and eligibility data.
   * @memberof module:Dashboard
   * @name userroles
   * @type {*|{}}
   */
  const userroles = useMemo(() => {
    const temp = rolesData?.data?.data?.results[0] || {};
    return temp;
  }, [rolesData?.data]);

  /**
   * Function to handle the logout action.
   * @memberof module:Dashboard
   * @name handleSignOUt
   * @function
   * @param event {Event } - The event object.
   */
  const handleSignOUt = (event) => {
    event.preventDefault();
    const detail = localStorage.getItem("token");
    axios({
      method: "post",
      url: `${baseUrl}/api/auth/logout/`,
      headers: {
        Authorization: `Token ${detail}`,
      },
    })
      .then((res) => {
        localStorage.removeItem("token");
        navigate("/");
      })
      .catch((err) => {
        console.log(err);
        localStorage.removeItem("token");
      });
  };
  if (rolesLoading || userLoading) {
    return <LoadingAnimation />;
  }
  return (
    <div className="dashboard_container">
      <div className="dashboard_left__Container">
        <SideNavbar
          userroles={userroles}
          setMobileMenu={setMobileMenu}
          mobileMenu={mobileMenu}
        />
      </div>
      {mobileMenu && (
        <div className="sidebar_menu_for_mobile">
          <SideNavbar
            userroles={userroles}
            setMobileMenu={setMobileMenu}
            mobileMenu={mobileMenu}
          />
        </div>
      )}
      <div className="dashboard_right__Container">
        <div className="top_navbar">
          <TopNavbar
            user={user}
            userroles={userroles}
            showLogoutMOdal={showLogoutMOdal}
            setShowLogoutModal={setShowLogoutModal}
            setMobileMenu={setMobileMenu}
            mobileMenu={mobileMenu}
          />
        </div>
        {/* notificationData={notificationData} setNotification={setNotification} notification={notification} */}
        <div className="main_container">
          <Routes>
            <Route>
              <Route
                index={true}
                element={<DefaultDashboard
                  userroles={userroles}
                  user={user}
                         />}
              />
              <Route
                path="/shareholder"
                element={<Shareholder userroles={userroles} />}
              />
              <Route
                path="/shareholderlist"
                element={<ShareholderList />}
              />
              <Route
                path="/profile"
                element={<Profile user={user} />}
              />
              <Route
                path="/Sharehistory"
                element={<ShareHistory />}
              />
              <Route
                path="/barchart"
                element={<BarChart />}
              />
              <Route
                path="/news"
                element={<News />}
              />
              <Route
                path="/announcement"
                element={<Announcement />}
              />
              <Route
                path="/events"
                element={<Events />}
              />
              <Route
                path="/sharetransferrequest"
                element={<ShareTransfers />}
              />
              <Route
                path="/shareholderdetails"
                element={<MultiStepForm />}
              />
              <Route
                path="/events/event-detail/:id"
                element={<SingleEventPage />}
              />
              <Route
                path="/bonus"
                element={<BonusList />}
              />
              <Route
                path="/share"
                element={<Share userroles={userroles} />}
              />
              <Route
                path="/share"
                element={<Share />}
              />
              <Route
                path="/announcement/announcementdetail/:id"
                element={<AnnouncementSinglePage />}
              />
              <Route
                path="/reports"
                element={<Report />}
              />
              <Route
                path="/reports/reports/:id"
                element={<ReportSinglePage />}
              />
              <Route
                path="/news/newspage/:id"
                element={<NewsDetail />}
              />
              <Route
                path="/share/:id"
                element={<NewsDetail />}
              />
              <Route
                path="/sharecertificate/:id"
                // element={<BandipurCertificate />}
                element={<Certificate />}
              />
              <Route
                path="/company"
                element={<CompanyDetailsPage />}
              />
              <Route
                path="/sharetransfer/:id"
                element={<Sharetransfer user={user} />}
              />
              <Route
                path="/applyshare/:id"
                element={<ApplyShare user={user} />}
              />
              <Route
                path="/share_contract"
                element={<ShareContract />}
              />
              <Route
                path="/share_invoice/:id"
                element={<Invoice />}
              />
              <Route
                path="/documents"
                element={<Documents />}
              />
              <Route
                path="/documents/:id"
                element={<DocumentSinglePage user={user} />}
              />
              <Route
                path="/karanama_file/:id"
                element={<ShareFileSinglePage user={user} />}
              />
              <Route
                path="/karanama/:id"
                element={<Karanama />}
              />
              <Route
                path="/uploadPaymentProof/*"
                element={<PaymentProofForm />}
              />
            </Route>
            <Route
              path="*"
              element={<PageNotFound />}
            >
            </Route>
          </Routes>
        </div>
        {showLogoutMOdal && (
          <LogoutModal
            handleSignOUt={handleSignOUt}
            showLogoutMOdal={showLogoutMOdal}
            setShowLogoutModal={setShowLogoutModal}
          />
        )}
      </div>
    </div>
  );
};

export default Dashboard;