import { MenuProps } from "./Menu.types";
import React, { useEffect, lazy, Suspense } from "react";
import { MashImage } from "@/components/elements/MashImage";
import { MenuItems } from "../MenuItems";
import { useMenuContext } from "@/context/MenuContext";
import { useDashboardStore } from "@/stores/dashboard";

const SideBlockUserProfileButton = lazy(() =>
  import("../sideblock/UserProfileButton").then((module) => ({
    default: module.UserProfileButton,
  }))
);

const CollapseUserProfileButton = lazy(() =>
  import("../collapse/UserProfileButton").then((module) => ({
    default: module.UserProfileButton,
  }))
);

const CollapseTopBar = lazy(() =>
  import("../collapse/TopBar").then((module) => ({
    default: module.TopBar,
  }))
);

const TopBar = lazy(() =>
  import("../TopBar").then((module) => ({
    default: module.TopBar,
  }))
);

const MenuBase = ({
  float = false,
  sideblock = false,
  collapse = false,
}: MenuProps) => {
  const {
    sidebarOpened,
    isSidebarOpenedMobile,
    setSidebarOpened,
    setIsSidebarOpenedMobile,
    filteredMenu,
    profile,
    activeSidebar,
  } = useDashboardStore();

  const { setActive } = useMenuContext();

  function collapseSidebarToggle() {
    if (collapse) {
      setSidebarOpened(!sidebarOpened);
    } else {
      setSidebarOpened(false);
      setIsSidebarOpenedMobile(false);
    }
    setActive("");
  }

  function generateNavClassNames() {
    // Define base classes
    const baseClasses = [
      "fixed start-0 top-0 z-[11] h-full overflow-hidden transition-all duration-300 dark:border-muted-800 dark:bg-muted-900",
    ];

    // Conditional classes based on the provided states
    const conditionalClasses = [
      collapse ? "w-[280px]" : "w-[calc(100%-80px)]",
      collapse ? "bg-primary-800" : "bg-white",
      !collapse || sideblock || float ? "border-r" : "border-0",
      collapse ? "" : "border-muted-200",
      sideblock ? "text-muted-500 dark:text-muted-400" : "",
      collapse ? "" : "md:w-[250px]",
      collapse ? "" : sideblock ? "lg:w-[280px]" : "lg:start-20",
      !collapse
        ? sideblock
          ? ""
          : float
          ? sidebarOpened
            ? "is-sidebar-translated translate-x-0 border-r"
            : "-translate-x-[130%]"
          : sidebarOpened
          ? "translate-x-0"
          : "-translate-x-[101%]"
        : sidebarOpened
        ? "lg:w-[280px]"
        : "lg:w-20",
      collapse
        ? isSidebarOpenedMobile
          ? "is-translated-mobile translate-x-0"
          : "-translate-x-[101%] lg:translate-x-0"
        : sideblock
        ? isSidebarOpenedMobile
          ? ""
          : "-translate-x-[101%]"
        : float
        ? isSidebarOpenedMobile
          ? "is-menu-sidebar-translated-mobile start-20 translate-x-0"
          : "-translate-x-[130%]"
        : isSidebarOpenedMobile
        ? "start-20 translate-x-0"
        : "-translate-x-[101%]",
    ];

    // Join all classes into a single string
    const classes = [...baseClasses, ...conditionalClasses]
      .filter((cls) => cls) // Remove empty strings to avoid unnecessary spaces
      .join(" ");

    return classes;
  }

  const navClassNames = generateNavClassNames();

  const renderMenus = () => {
    return filteredMenu.map((section, key) => (
      <MenuItems
        key={`${section.title}-menu`}
        menuId={`${section.title}-menu`}
        activeMenuKey={section.title}
        menuItems={filteredMenu[key].menu}
        collapse={collapse}
        sideblock={sideblock}
      />
    ));
  };

  const activeMenuItem = filteredMenu.find(
    (item) => item.title === activeSidebar
  );

  if (!activeMenuItem || (!activeMenuItem.menu && !activeMenuItem.subMenu)) {
    return null;
  }

  return (
    <nav className={navClassNames}>
      {collapse && (
        <div className="absolute inset-0 z-[1] block overflow-hidden opacity-20">
          <MashImage
            src="/img/sidebar-bg.webp"
            // fill
            width={80}
            height={869}
            className="h-full w-full object-cover object-center"
            alt="sidebar background"
          />
        </div>
      )}
      <div
        className={
          collapse || sideblock
            ? "relative z-[2] flex h-full flex-col"
            : "h-full"
        }
      >
        <Suspense fallback={<div>Loading...</div>}>
          {sideblock || collapse ? (
            <CollapseTopBar
              collapse={collapse}
              sidebarOpened={sidebarOpened}
              setIsSidebarOpenedMobile={setIsSidebarOpenedMobile}
              collapseSidebarToggle={collapseSidebarToggle}
            />
          ) : (
            <TopBar
              float={float}
              sidebarOpened={sidebarOpened}
              isSidebarOpenedMobile={isSidebarOpenedMobile}
              setIsSidebarOpenedMobile={setIsSidebarOpenedMobile}
              setSidebarOpened={setSidebarOpened}
            />
          )}

          {sideblock && (
            <SideBlockUserProfileButton
              userName={profile?.firstName || "Clark Smith"}
              userImageSrc={profile?.avatar || "/img/avatars/placeholder.webp"}
            />
          )}

          {renderMenus()}

          {collapse && (
            <CollapseUserProfileButton
              userName={profile?.firstName || "Clark Smith"}
              userImageSrc={profile?.avatar || "/img/avatars/placeholder.webp"}
              isVisible={sidebarOpened}
            />
          )}
        </Suspense>
      </div>
    </nav>
  );
};

export const Menu = MenuBase;