'use client'

import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar
} from '@/components/ui/sidebar'
import { useIsMobile } from '@/hooks/use-mobile'
import { type LucideIcon } from 'lucide-react'
import { NavLink, useParams } from 'react-router'

type NavItem = {
  title: string
  url: string
  icon?: LucideIcon
}

export function NavMain({
  data
}: {
  data: {
    navMain: NavItem[]
    navContent: NavItem[]
  }
}) {
  return (
    <>
      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            {data.navMain.map((props, idx) => (
              <SidebarMenuItemLink key={idx} {...props} />
            ))}
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarGroupLabel>Gestão de matrículas</SidebarGroupLabel>
            {data.navContent.map((props, idx) => (
              <SidebarMenuItemLink key={idx} {...props} />
            ))}
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </>
  )
}

function SidebarMenuItemLink({ title, url, icon: Icon }: NavItem) {
  const { orgid } = useParams()
  const { toggleSidebar } = useSidebar()
  const isMobile = useIsMobile()

  const onToggle = () => (isMobile ? toggleSidebar() : null)

  return (
    <SidebarMenuItem key={title} onClick={onToggle}>
      <NavLink to={`/${orgid}${url}`}>
        {({ isActive }) => (
          <SidebarMenuButton
            asChild
            className="data-[active=true]:text-lime-500"
            isActive={isActive}
            tooltip={title}
          >
            <span>
              {Icon && <Icon />}
              <span>{title}</span>
            </span>
          </SidebarMenuButton>
        )}
      </NavLink>
    </SidebarMenuItem>
  )
}