"use client"

import * as React from "react"
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
} from "@/src/views/components/ui/sidebar"
import { TeamSwitcher } from "./team-switcher"
import { NavMain } from "./nav-main"
import { NavProjects } from "./nav-projects"
import { NavUser } from "./nav-user"
import {NavMaster } from "./nav-master"
import { data } from "@/src/lib/routes"
import ThemeButton from "../ThemeButton"
import { useSession } from "next-auth/react"
import { ScrollArea } from "../ui/scroll-area"
import Link from "next/link"
import { ActivitySquare } from "lucide-react"


export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    const { data: session } = useSession()

    return (
        <Sidebar collapsible="icon" {...props}>
            <SidebarHeader>
                <TeamSwitcher />
            </SidebarHeader>
            <SidebarContent>
                <ScrollArea className="h-full">
                    <NavMain items={data.settings} role={session?.user.role ?? "guest"} />
                    {/* <NavProjects projects={data.projects} role={session?.user.role ?? "guest"} /> */}
                    <NavMaster label="Pengguna" items={data.users} role={session?.user.role ?? "guest"} />
                    <NavMaster label="Mastering" items={data.academic} role={session?.user.role ?? "guest"} />
                    <NavMaster label="Institusi" items={data.institution} role={session?.user.role ?? "guest"} />
                    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
                        <SidebarGroupLabel>Appearance</SidebarGroupLabel>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                    <ThemeButton />
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroup>
                     <SidebarGroup className="group-data-[collapsible=icon]:hidden">
                        <SidebarGroupLabel>Log</SidebarGroupLabel>
                        <SidebarMenu>
                            <SidebarMenuItem>
                                <SidebarMenuButton asChild>
                                   
                                    <Link href="/dashboard/log-activity"><ActivitySquare /> Log Activity</Link>
                                </SidebarMenuButton>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </SidebarGroup>
                </ScrollArea>
            </SidebarContent>
            <SidebarFooter>
                <NavUser />
            </SidebarFooter>
            <SidebarRail />
        </Sidebar>
    )
}