'use client';
import { FC, Suspense } from "react";
import { MenuProps } from "@/validations/mutual/dashboard/props";

import UserProfileSection from "./userProfileSection";
import ClientSelectionSection from "./clientSelectionSection";
import MenuItemsSection from "./menuItemsSection";
import MenuLoadingState from "./menuLoadingState";
import MenuErrorState from "./menuErrorState";
import MenuEmptyState from "./menuEmptyState";
import LoadingContent from "@/components/mutual/loader/component";

const MenuComponent: FC<MenuProps> = ({
    lang, activePageUrl, useReloadWindow, availableApplications,
    onlineData, onlineLoading, onlineError,
    userData, userLoading, userError,
    selectionData, selectionLoading, selectionError,
    menuData, menuLoading, menuError
}) => {
    if (menuLoading) { return <MenuLoadingState /> }    // Render loading state
    if (menuError) { return <MenuErrorState error={menuError} />; }    // Render error state
    if (availableApplications.length === 0) { return <MenuEmptyState />; }    // Render empty state
    function handleClientSelection(client: any) { console.log('Client selected:', client) }
    return (
        <div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
            <div className="flex flex-col">
                {/* User Profile Section */}
                <Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
                    <UserProfileSection userData={userData} onlineData={onlineData} />
                </Suspense>
                {/* Client Selection Section */}
                <Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
                    <ClientSelectionSection selectionData={selectionData} initialSelectedClient={selectionData} onClientSelect={handleClientSelection} />
                </Suspense>

                {/* Menu Items Section */}
                <Suspense fallback={<div><LoadingContent height="h-16" size="w-36 h-48" key={"loading-conent"} plane="h-full w-full" /></div>}>
                    <MenuItemsSection availableApplications={availableApplications} activePageUrl={activePageUrl} lang={lang} />
                </Suspense>
            </div>
        </div>
    );
};

export default MenuComponent;