'use client';
import React, { FC } from 'react';
import { ClientProviders } from "@/components/mutual/providers/client-providers";
import { ModeTypes } from "@/validations/mutual/dashboard/props";
import { useMenu } from "@/components/mutual/context/menu/context";
import { useOnline } from "@/components/mutual/context/online/context";
import { useSelection } from "@/components/mutual/context/selection/context";
import { useUser } from "@/components/mutual/context/user/context";
import { useConfig } from "@/components/mutual/context/config/context";

import HeaderComponent from "@/components/custom/header/component";
import MenuComponent from "@/components/custom/menu/component";
import ContentComponent from "@/components/custom/content/component";
import FooterComponent from "@/components/custom/footer/component";

interface ClientLayoutProps { activePageUrl: string, searchParams: Record<string, any> }

const ClientLayout: FC<ClientLayoutProps> = ({ activePageUrl, searchParams }) => {

    const { onlineData, isLoading: onlineLoading, error: onlineError, refreshOnline, updateOnline } = useOnline();
    const { userData, isLoading: userLoading, error: userError, refreshUser, updateUser } = useUser();
    const { availableApplications, isLoading: menuLoading, error: menuError, menuData, refreshMenu, updateMenu } = useMenu();
    const { selectionData, isLoading: selectionLoading, error: selectionError, refreshSelection, updateSelection } = useSelection();
    const { configData, isLoading: configLoading, error: configError, refreshConfig, updateConfig } = useConfig();
    const prefix = "/panel"
    const mode = (searchParams?.mode as ModeTypes) || 'shortList';
    console.log("onlineData", onlineData)

    return (
        <ClientProviders>
            <div className="flex flex-col min-w-screen">
                <HeaderComponent activePageUrl={activePageUrl} searchParams={searchParams}
                    onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline}
                    userData={userData} userLoading={userLoading} userError={userError} refreshUser={refreshUser} updateUser={updateUser} />
                <MenuComponent availableApplications={availableApplications} activePageUrl={activePageUrl} prefix={prefix} searchParams={searchParams}
                    onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline}
                    userData={userData} userLoading={userLoading} userError={userError} refreshUser={refreshUser} updateUser={updateUser}
                    selectionData={selectionData} selectionLoading={selectionLoading} selectionError={selectionError} refreshSelection={refreshSelection} updateSelection={updateSelection}
                    menuData={menuData} menuLoading={menuLoading} menuError={menuError} refreshMenu={refreshMenu} updateMenu={updateMenu} />
                <ContentComponent activePageUrl={activePageUrl} mode={mode} searchParams={searchParams}
                    userData={userData} userLoading={userLoading} userError={userError} refreshUser={refreshUser} updateUser={updateUser}
                    onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline} />
                <FooterComponent activePageUrl={activePageUrl} searchParams={searchParams}
                    configData={configData} configLoading={configLoading} configError={configError} refreshConfig={refreshConfig} updateConfig={updateConfig}
                    onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline} />
            </div>
        </ClientProviders>
    );
};

export { ClientLayout }
