import {
	ChevronDown,
	Home,
	Inbox,
	LayoutList,
	List,
	Newspaper,
	Plus,
	ScanBarcode,
	Search,
	Settings
} from 'lucide-react'

import AdminSidebarFooter from '@/components/(protected)/admin/footer'
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupAction,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem
} from '@/components/ui/sidebar'
import {ADMIN_DASHBOARD_PATH} from '@/lib/config/routes'
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger
} from '@/ui/collapsible'

const items = [
	{
		title: 'Головна',
		url: `${ADMIN_DASHBOARD_PATH}`,
		icon: Home
	},
	{
		title: 'Категорії',
		url: `${ADMIN_DASHBOARD_PATH}/category`,
		icon: LayoutList
	},
	{
		title: 'Товари',
		url: `${ADMIN_DASHBOARD_PATH}/product`,
		icon: ScanBarcode
	},
	{
		title: 'Сутність',
		url: `${ADMIN_DASHBOARD_PATH}/entity`,
		icon: Newspaper
	},
	{
		title: 'Замовлення',
		url: `${ADMIN_DASHBOARD_PATH}/order`,
		icon: List
	}
	// {
	// 	title: 'Search',
	// 	url: '#',
	// 	icon: Search
	// },
	// {
	// 	title: 'Settings',
	// 	url: '#',
	// 	icon: Settings
	// }
]

export function AdminSidebar() {
	return (
		<Sidebar collapsible='icon' variant='sidebar'>
			{/*<AdminSidebarHeader />*/}
			<SidebarContent>
				<SidebarGroup>
					<SidebarGroupLabel asChild>Projects</SidebarGroupLabel>
					<SidebarGroupAction title='Add Project'>
						<Plus /> <span className='sr-only'>Add Project</span>
					</SidebarGroupAction>
					<SidebarGroupContent>SidebarGroupAction</SidebarGroupContent>
				</SidebarGroup>
				<SidebarGroup>
					{/*<SidebarGroupLabel>Application</SidebarGroupLabel>*/}
					<SidebarGroupContent>
						<SidebarMenu>
							{items.map(item => (
								<SidebarMenuItem key={item.title}>
									<SidebarMenuButton asChild>
										<a href={item.url}>
											<item.icon />
											<span>{item.title}</span>
										</a>
									</SidebarMenuButton>
								</SidebarMenuItem>
							))}
						</SidebarMenu>
					</SidebarGroupContent>
				</SidebarGroup>
				<Collapsible defaultOpen className='group/collapsible' hidden={true}>
					<SidebarGroup>
						<SidebarGroupLabel asChild>
							<CollapsibleTrigger>
								Help
								<ChevronDown className='ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180' />
							</CollapsibleTrigger>
						</SidebarGroupLabel>
						<CollapsibleContent>
							<SidebarGroupContent>SidebarGroupContent</SidebarGroupContent>
						</CollapsibleContent>
					</SidebarGroup>
				</Collapsible>
			</SidebarContent>
			<AdminSidebarFooter />
		</Sidebar>
	)
}