import { Outlet } from "react-router";

import { AppSidebar } from "~/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
import { Separator } from "~/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "~/components/ui/sidebar";

export default function PrivateLayout() {
  // const location = useLocation();
  // const navigate = useNavigate();

  // const dispatch = useAppDispatch();

  // const { data, isLoading, isError, isSuccess } = useMe();

  // useEffect(() => {
  //   if (isError) {
  //     navigate(Links.LOGIN, {
  //       replace: true,
  //       state: { from: location.pathname },
  //     });
  //   }
  // }, [isError]);

  // useEffect(() => {
  //   if (isSuccess && data) {
  //     dispatch(setUser(data?.data));
  //   }
  // }, [isSuccess, data]);

  // if ((isLoading || !data?.data) && Object.keys(location?.state || {}).length)
  //   return (
  //     <div className="h-screen w-screen flex items-center justify-center ">
  //       <Loader showLabel={true} size="size-10" />
  //     </div>
  //   );
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset className="h-screen overflow-x-hidden">
        <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 sticky top-0 bg-white z-50">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator
              orientation="vertical"
              className="mr-2 data-[orientation=vertical]: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>

        <div className="max-w-full p-4 pt-0">
          <Outlet />
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}