import { Calendar, ChevronUp, Home, Inbox, Search, User2 } from 'lucide-react'

import { Link, routes } from '@redwoodjs/router'

import { useAuth } from 'src/auth'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarFooter,
} from '@/components/ui/sidebar'

// Menu items.
const items = [
  {
    title: 'Dashboard',
    // url: routes.dashboard(),
    url: '/dashboard',
    icon: Home,
  },
  {
    title: 'Nachhilfe suchen',
    // url: routes.posts(),
    url: '/admin/posts',
    icon: Search,
  },
  {
    title: 'Nachhilfetermine planen',
    url: '#',
    icon: Calendar,
  },
  {
    title: 'Nachhilfe anbieten',
    url: '#',
    icon: Inbox,
  },
]

export function AppSidebar() {
  const { logOut, currentUser: user } = useAuth()

  return (
    <Sidebar>
      <SidebarHeader>
        <Link to={routes.dashboard()}>
          <span className="m-2 inline-block aspect-square rounded bg-blue-500 p-2">
            NH
          </span>
          Nachhilfesystem 2024
        </Link>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <Link to={item.url}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuButton>
                  <User2 /> {user.firstName + ' ' + user.lastName}
                  <ChevronUp className="ml-auto" />
                </SidebarMenuButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                side="top"
                className="w-[--radix-popper-anchor-width]"
              >
                <DropdownMenuItem>Account</DropdownMenuItem>
                <DropdownMenuItem>
                  <Link to={''}>Settings</Link>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <button onClick={logOut}>Sign out</button>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  )
}
