import React, { lazy, Suspense } from "react";

import { usePageTitleState } from "../../zustand/PageTitleState";
import { MdOutlineArrowForwardIos } from "react-icons/md";
import { useLocation, useNavigate } from "react-router-dom";
import { getPrevPathRoute } from "../../utils/getPrevPathRoute";
import { deletePathSegments } from "../../utils/deletePathSegments";
import SpinContainer from "../../Components/Layout/SpinContainer";
import NavBarRightSide from "../../Components/Layout/Navbar/NavBarRightSide";

// Lazy load the ChangePasswordModel
const ChangePasswordModel = lazy(() => import("./model/AddModel"));

const NavBar = () => {
  const { PageTitle } = usePageTitleState((state) => state);
  const location = useLocation();
  const navigate = useNavigate();
  const PrevPath = getPrevPathRoute(location.pathname);

  const handelNavigate = () => {
    if (PrevPath === 0) {
      return;
    }
    navigate(deletePathSegments(location.pathname, PrevPath));
  };

  return (
    <div className="NavBar">
      <Suspense fallback={<SpinContainer />}>
        <span className="navbar_link" onClick={handelNavigate}>
          <MdOutlineArrowForwardIos /> {PageTitle}
        </span>
        <NavBarRightSide />
        <ChangePasswordModel />
      </Suspense>
    </div>
  );
};

export default NavBar;
