import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { AppSidebarHeader } from '@/components/app-sidebar-header';
import { requestPermissionAndGetToken } from '@/firebase';
import { type BreadcrumbItem } from '@/types';
import { router } from '@inertiajs/react';
import { useEffect, type PropsWithChildren } from 'react';

export default function AppSidebarLayout({
    children,
    breadcrumbs = [],
}: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    
    useEffect(() => {
        let sent = false;

        requestPermissionAndGetToken().then(async (token) => {
            if (!token || sent) return;
            sent = true;

            await fetch('/api/mobile/save-fcm-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'application/json',
                },
                body: JSON.stringify({ token }),
            });
        });
    }, []);
    
    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" className="overflow-x-hidden">
                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                {children}
            </AppContent>
        </AppShell>
    );
}