import Spinner from "@/components/spinner";
import SettingContextProvider from "@/context/SettingProvider";
import { SidebarProvider } from "@/context/SidebarContext";
import getData from "@/utils/fetch";
import { sidebarCookie } from "@/utils/lib/sidebar-cookie";
import { PropsWithChildren, Suspense } from "react";
import { LayoutContent } from "./layout-content";
import { DashboardNavbar } from "./navbar";
import { DashboardSidebar } from "./sidebar";

export default async function DashboardLayout({ children }: PropsWithChildren) {
  const data = await getData(`/api/v1/user-settings`);
  const settings = data?.data?.settings ?? [];
  const permissions = data?.data?.permissions ?? [];
  return (
    <>
      <SettingContextProvider settings={settings}>
        <SidebarProvider
          initialCollapsed={sidebarCookie.get().isCollapsed}
          permissions={permissions}
        >
          <DashboardNavbar />
          <div className="mt-16 flex items-start">
            <DashboardSidebar />
            <LayoutContent>
              <Suspense fallback={<Spinner size={"lg"} />}>{children}</Suspense>
            </LayoutContent>
          </div>
        </SidebarProvider>
      </SettingContextProvider>
    </>
  );
}