'use client';

import Link from 'next/link';
import { IconDots, IconFolder, IconShare3, IconTrash, type Icon } from '@tabler/icons-react';

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@nice/ui/components/dropdown-menu';
import {
	SidebarGroup,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from '@nice/ui/components/sidebar';

interface DocumentItem {
	title: string;
	url: string;
	icon: Icon;
}

export function NavDocuments({ items }: { items: DocumentItem[] }) {
	const { isMobile } = useSidebar();

	return (
		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
			<SidebarGroupLabel>快速访问</SidebarGroupLabel>
			<SidebarMenu>
				{items.map((item) => (
					<SidebarMenuItem key={item.title}>
						<SidebarMenuButton asChild>
							<Link href={item.url}>
								<item.icon />
								<span>{item.title}</span>
							</Link>
						</SidebarMenuButton>
						<DropdownMenu>
							<DropdownMenuTrigger asChild>
								<SidebarMenuAction showOnHover className="data-[state=open]:bg-accent rounded-sm">
									<IconDots />
									<span className="sr-only">更多</span>
								</SidebarMenuAction>
							</DropdownMenuTrigger>
							<DropdownMenuContent
								className="w-24 rounded-lg"
								side={isMobile ? 'bottom' : 'right'}
								align={isMobile ? 'end' : 'start'}
							>
								<DropdownMenuItem asChild>
									<Link href={item.url}>
										<IconFolder />
										<span>打开</span>
									</Link>
								</DropdownMenuItem>
								<DropdownMenuItem>
									<IconShare3 />
									<span>分享</span>
								</DropdownMenuItem>
								<DropdownMenuSeparator />
								<DropdownMenuItem variant="destructive">
									<IconTrash />
									<span>删除</span>
								</DropdownMenuItem>
							</DropdownMenuContent>
						</DropdownMenu>
					</SidebarMenuItem>
				))}
				<SidebarMenuItem>
					<SidebarMenuButton className="text-sidebar-foreground/70" asChild>
						<Link href="/drive">
							<IconDots className="text-sidebar-foreground/70" />
							<span>更多</span>
						</Link>
					</SidebarMenuButton>
				</SidebarMenuItem>
			</SidebarMenu>
		</SidebarGroup>
	);
}