import AppLayoutTemplate from '@admin/layouts/app/app-sidebar-layout';
import { type BreadcrumbItem } from '@admin/types';
import { type ReactNode } from 'react';
import FlashToaster from '@admin/components/FlashToaster';
import { usePage } from "@inertiajs/react";
import useAuthorization, { type CanFunction } from '@admin/hooks/useAuthorization';
import useTranslation, { type TranslateFunction } from '@admin/hooks/useTranslation';
import { SocketProviderBridge } from '@admin/components/SocketProviderBridge';
import useTenantAccess, { type TenantAccessFunction } from '@admin/hooks/useTenantAccess';

interface PageProps {
    translations: Record<string, string>;
    current_locale: string;
    [key: string]: any;
}

declare global {
    interface Window {
        can: CanFunction;
        tenantAccess: TenantAccessFunction;
        __: TranslateFunction;
    }
}

interface AppLayoutProps {
    children: ReactNode;
    breadcrumbs?: BreadcrumbItem[];
    title?: string;
}

export default function AppLayout({ children, breadcrumbs, ...props }: AppLayoutProps) {

    // Assign to window with proper typing
    window.can = useAuthorization().can;
    window.tenantAccess = useTenantAccess().tenantAccess;
    window.__ = useTranslation().__;

    return (
        // <SocketProviderBridge>
        //     <FlashToaster />
        //     <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
        //         {children}
        //     </AppLayoutTemplate>
        // </SocketProviderBridge>

        <>
            <FlashToaster />
            <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
                {children}
            </AppLayoutTemplate>
        </>
    );
}