import { useLayout } from '../../context/layout-provider'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from '../ui/sidebar'
// import { AppTitle } from './app-title'
import { sidebarData as defaultSidebarData } from './data/sidebar-data'
import { NavGroup } from './nav-group'
import { NavUser } from './nav-user'
import { TeamSwitcher } from './team-switcher'
import { type SidebarData } from './types'

type AppSidebarProps = {
  onSignOut?: () => void
  /** Pass custom sidebar data to override the default shared nav items. */
  sidebarData?: SidebarData
  /** URL for the user profile / settings page shown in the sidebar user menu. */
  profileUrl?: string
}

export function AppSidebar({ onSignOut, sidebarData, profileUrl }: AppSidebarProps = {}) {
  const { collapsible, variant } = useLayout()
  const data = sidebarData ?? defaultSidebarData
  return (
    <Sidebar collapsible={collapsible} variant={variant}>
      <SidebarHeader>
        <TeamSwitcher teams={data.teams} />

        {/* Replace <TeamSwitch /> with the following <AppTitle />
         /* if you want to use the normal app title instead of TeamSwitch dropdown */}
        {/* <AppTitle /> */}
      </SidebarHeader>
      <SidebarContent>
        {data.navGroups.map((props) => (
          <NavGroup key={props.title} {...props} />
        ))}
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} onSignOut={onSignOut} profileUrl={profileUrl} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}