import './style.scss';
import { redirect } from 'next/navigation';
import { fetchJson, getTokenData } from '@/lib/utils/server';
import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar';
import { StudioProvider } from './context';
import Sidebar from './Sidebar';
import type { DropdownData } from '@/types/response/mypage/dropdown';

export default async function StudioLayout({ children }: { children: React.ReactNode })
{
	const [res, tokenData] = await Promise.all([
		fetchJson<DropdownData>('/api/mypage/dropdown'),
		getTokenData()
	]);

	if (!res.success) {
		redirect('/');
	}

	const channelID = res.data?.channelID ?? null;
	const memberID = parseInt(tokenData?.id ?? '0');

	return (
		<StudioProvider channelID={channelID} memberID={memberID}>
			<SidebarProvider>
				<Sidebar />
				<SidebarInset>
					<div className="studio__topbar">
						<SidebarTrigger />
					</div>
					<main className="studio__content">
						{children}
					</main>
				</SidebarInset>
			</SidebarProvider>
		</StudioProvider>
	);
}