"use client";

import { PermissionContext } from "@/context/PermissionProvider";
import { SidebarProvider, useSidebarContext } from "@/context/SidebarContext";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { PropsWithChildren, useEffect } from "react";
import { twMerge } from "tailwind-merge";
import { DashboardNavbar } from "./navbar";
import { DashboardSidebar } from "./sidebar";

export default function DashboardLayout({ children }: PropsWithChildren) {
  const session: any = useSession();
  const router = useRouter();

  if (session.status === "unauthenticated") {
    router.push("/sign-in");
  }
  const getUserPermissions = async () => {
    const { data } = await axios.get(`/api/role-permission`);
    return data?.data;
  };
  const {
    data: permissions = [],
    isError,
    error = {} as any,
  } = useQuery({
    queryKey: ["user-permissions"],
    queryFn: () => getUserPermissions(),
    retry: 0,
  });
  useEffect(() => {
    if (
      isError &&
      error?.response?.data?.error?.message === "Unauthenticated."
    ) {
      router.push("/sign-in");
    }
  }, [isError]);

  return (
    <>
      <PermissionContext.Provider value={permissions}>
        <SidebarProvider>
          <Content>{children}</Content>
        </SidebarProvider>
      </PermissionContext.Provider>
    </>
  );
}

function Content({ children }: PropsWithChildren) {
  const { isCollapsed } = useSidebarContext();

  return (
    <>
      <DashboardNavbar />
      <div className="mt-16 flex items-start">
        <DashboardSidebar />
        <div
          id="main-content"
          className={twMerge(
            "relative h-full w-full overflow-y-auto bg-gray-50 dark:bg-gray-900",
            isCollapsed ? "lg:ml-16" : "lg:ml-64"
          )}
        >
          {children}
        </div>
      </div>
    </>
  );
}