"use client";

import * as React from "react";
import {
	AudioWaveform,
	BookOpen,
	Bot,
	Command,
	Users,
	GalleryVerticalEnd,
	Settings2,
	Calendar,
	Loader2,
	Camera,
	UserRoundCog,
	MapPin,
} from "lucide-react";

import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import { TeamSwitcher } from "@/components/team-switcher";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarHeader,
	SidebarRail,
} from "@/components/ui/sidebar";
import useMe from "@/hooks/use-me";

// This is sample data.
const data = {
	teams: [
		{
			name: "Latosa Escrima",
			logo: GalleryVerticalEnd,
			plan: "",
		},
		{
			name: "Wing-Tsun",
			logo: Command,
			plan: "",
		},
	],
	navMain: [
		{
			title: "Membres",
			url: "/dashboard/members",
			icon: Users,
			isActive: true,
			items: [
				{
					title: "Liste des membres",
					url: "/dashboard/members",
				},
			],
		},
		{
			title: "Adresses",
			url: "/dashboard/locations",
			icon: MapPin,
			items: [
				{
					title: "Listes des adresses",
					url: "/dashboard/locations",
				},
			],
		},
		{
			title: "Planning",
			icon: Calendar,
			url: "/dashboard/planning",
			items: [
				{
					title: "Planning",
					url: "/dashboard/planning",
				},
			],
		},
		{
			title: "Blogs",
			url: "/dashboard/blogs",
			icon: BookOpen,
			items: [
				{
					title: "Articles",
					url: "/dashboard/blogs",
				},
				{
					title: "Nouvel article",
					url: "/dashboard/blogs/new",
				},
			],
		},
		{
			title: "Configurations",
			url: "/dashboard/settings",
			icon: Settings2,
			items: [
				{
					title: "Media",
					url: "/dashboard/settings/media",
					icon: Camera,
				},
				{
					title: "Shortcodes",
					url: "/dashboard/settings/shortcodes",
					icon: Camera,
				},
				{
					title: "Rôles et Permissions",
					url: "/dashboard/settings/roles",
					icon: UserRoundCog,
				},
			],
		},
	],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	const { user, isLoading, success, error } = useMe();

	return (
		<Sidebar collapsible="icon" {...props}>
			<SidebarHeader>
				<TeamSwitcher teams={data.teams} />
			</SidebarHeader>
			<SidebarContent>
				<NavMain items={data.navMain} />
			</SidebarContent>
			<SidebarFooter>
				{isLoading ? (
					<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
				) : (
					<NavUser user={user!} />
				)}
			</SidebarFooter>
			<SidebarRail />
		</Sidebar>
	);
}