import {cookies} from 'next/headers'
import {ReactNode} from 'react'

import {auth} from '@/auth'
import AdminPermission from '@/components/(protected)/admin/auth/permission'
import {AdminSidebar} from '@/components/(protected)/admin/sidebar'
import {
	SidebarInset,
	SidebarProvider,
	SidebarTrigger
} from '@/components/ui/sidebar'
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator
} from '@/ui/breadcrumb'
import {Separator} from '@/ui/separator'

export default async function AdminLayout({children}: {children: ReactNode}) {
	//const session = await auth()
	if (!(await auth())) return <AdminPermission />

	const cookieStore = await cookies()
	const defaultOpen = cookieStore.get('sidebar:state')?.value === 'true'

	return (
		<SidebarProvider
			defaultOpen={defaultOpen}
			style={{
				// @ts-ignore
				'--sidebar-width': '16rem',
				'--sidebar-width-mobile': '18rem'
			}}
		>
			<AdminSidebar />
			<SidebarInset>
				<header className='flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12'>
					<div className='flex items-center gap-2 px-4'>
						<SidebarTrigger className='-ml-1' />
						<Separator orientation='vertical' className='mr-2 h-4' />
						<Breadcrumb>
							<BreadcrumbList>
								<BreadcrumbItem className='hidden md:block'>
									<BreadcrumbLink href='#'>
										Building Your Application
									</BreadcrumbLink>
								</BreadcrumbItem>
								<BreadcrumbSeparator className='hidden md:block' />
								<BreadcrumbItem>
									<BreadcrumbPage>Data Fetching</BreadcrumbPage>
								</BreadcrumbItem>
							</BreadcrumbList>
						</Breadcrumb>
					</div>
				</header>
				<main id='admin-bw-panel' className='container'>
					{children}
				</main>
			</SidebarInset>
		</SidebarProvider>
	)
}