"use client";

import * as React from "react";
import {
  ChartSpline,
  Users,
  Building2,
  Shield,
  Tag,
  UserPlus,
  Ticket,
} from "lucide-react";

// import { NavMain } from "@/components/nav-main";
import { NavProjects } from "@/components/nav-projects";
import { NavUser } from "@/components/nav-user";
import { TeamSwitcher } from "@/components/team-switcher";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar";
import { useSession } from "next-auth/react";

// This is sample data.
const data = {
  user: {
    name: "Admin",
    email: "Admin",
    avatar: "avatar",
  },
  teams: [
    {
      name: "Together Voice",
    },
  ],
  projects: [
    {
      name: "Dashboard",
      url: "/dashboard",
      icon: ChartSpline,
    },
    {
      name: "Users",
      url: "/users",
      icon: Users,
    },
    {
      name: "Communities",
      url: "/communities",
      icon: Building2,
    },
    {
      name: "Posts",
      url: "/posts",
      icon: Building2,
    },
    {
      name: "Moderation",
      url: "/moderation",
      icon: Shield,
    },
    {
      name: "In-App Content Tags",
      url: "/in-app-content",
      icon: Tag,
    },
    {
      name: "Waitlist",
      url: "/wait-list",
      icon: UserPlus,
    },
    {
      name: "Support Tickets",
      url: "/support-tickets",
      icon: Ticket,
    },
    // {
    //   name: "Announcements",
    //   url: "/announcements",
    //   icon: Megaphone,
    // },
    // {
    //   name: "Settings",
    //   url: "/settings",
    //   icon: Settings,
    // },
  ],
  // navMain: [
  //   {
  //     title: "Content Management",
  //     url: "#",
  //     icon: SquareTerminal,
  //     isActive: true,
  //     items: [
  //       {
  //         title: "Terms of service",
  //         url: "/terms-of-service",
  //       },
  //       {
  //         title: "Privacy policy",
  //         url: "/privacy-policy",
  //       },
  //       {
  //         title: "FAQs or Support Articles",
  //         url: "/faqs",
  //       },
  //     ],
  //   },
  //   {
  //     title: "Communication",
  //     url: "#",
  //     icon: Bell,
  //     isActive: true,
  //     items: [
  //       {
  //         title: "Notifications",
  //         url: "/notifications",
  //       },
  //       {
  //         title: "Tickets",
  //         url: "/tickets",
  //       },
  //       {
  //         title: "Subscriptions",
  //         url: "/subscriptions",
  //       },
  //     ],
  //   },
  // ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { data: user } = useSession();
  data.user.name = user?.user.name || "Admin";
  data.user.email = user?.user.email || "Admin";
  data.user.avatar = user?.user.image || "avatar";

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <TeamSwitcher teams={data.teams} />
      </SidebarHeader>
      <SidebarContent>
        <NavProjects projects={data.projects} />
        {/* <div className="">
          <NavMain items={data.navMain} />
        </div> */}
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}