'use client'

import * as React from 'react'
import {
  Calendar,
  Home,
  Inbox,
  LucideIcon,
  MessageCircleQuestion,
  Search,
  Settings2,
  ChefHat,
  Dumbbell,
  Rabbit,
} from 'lucide-react'

import { NavMain } from '@/components/nav-main'
import { NavSecondary } from '@/components/nav-secondary'
import { TeamSwitcher } from '@/components/team-switcher'
import { Sidebar, SidebarContent, SidebarHeader, SidebarRail } from '@/components/ui/sidebar'
import useGlobal from '@/stores'
import { Tenant } from '@/payload-types'

export type SidebarLeftTeam = {
  id: number
  name: string
  logo: string
  roles: string[]
  slug: string
  domain: string
}

export type SidebarLeftMainNavItem = {
  name: string
  url: string
  icon: LucideIcon
  isActive?: boolean
  badge?: number
}

export type SidebarLink = {
  name: string
  url: string
  emoji?: string
}

export type SidebarWorkspace = {
  name: string
  emoji?: string
  pages: SidebarLink[]
}

const makeNavMainItems = (activeTenant: Tenant): SidebarLeftMainNavItem[] => {
  return [
    {
      name: 'Home',
      url: '#',
      icon: Home,
    },
    {
      name: 'Calendar',
      url: `/${activeTenant.slug}/calendar`,
      icon: Calendar,
    },
    {
      name: 'Workouts',
      url: `/${activeTenant.slug}/workouts`,
      icon: Dumbbell,
    },
    {
      name: 'Nutrition',
      url: `/${activeTenant.slug}/nutrition`,
      icon: ChefHat,
    },
    {
      name: 'Habbits',
      url: `/${activeTenant.slug}/habbits`,
      icon: Rabbit,
    },
    {
      name: 'Inbox',
      url: `/${activeTenant.slug}/inbox`,
      icon: Inbox,
    },
  ]
}

const makeNavSecondaryItems = (activeTenant: Tenant): SidebarLeftMainNavItem[] => {
  return [
    {
      name: 'Search',
      url: `/${activeTenant.slug}/search`,
      icon: Search,
    },
    {
      name: 'Settings',
      url: `/${activeTenant.slug}/settings`,
      icon: Settings2,
    },
    {
      name: 'Help',
      url: `/${activeTenant.slug}/help`,
      icon: MessageCircleQuestion,
    },
  ]
}

export type SidebarLeftProps = {
  teams?: SidebarLeftTeam[]
  navMain?: SidebarLeftMainNavItem[]
  navSecondary?: SidebarLeftMainNavItem[]
  favorites?: SidebarLink[]
  workspaces?: SidebarWorkspace[]
} & React.ComponentProps<typeof Sidebar>

export function SidebarLeft(props: SidebarLeftProps) {
  const { favorites, workspaces, ...rest } = props

  const { user, tenant: activeTenant } = useGlobal()

  const teams = React.useMemo(() => {
    if (props.teams) return props.teams
    if (!user?.tenants?.length) return [] as SidebarLeftTeam[]

    const teams: SidebarLeftTeam[] = user.tenants.map((t) => {
      const tenant = t.tenant as Tenant
      return {
        id: tenant.id,
        name: tenant.name,
        domain: tenant.domain || '',
        slug: tenant.slug,
        logo: '', // TODO: add logo to tenate record
        roles: t.roles,
        isActive: t.id === activeTenant?.id,
      }
    })
    return teams
  }, [props.teams, activeTenant, user])

  const navMain = React.useMemo(() => {
    if (props.navMain) return props.navMain
    if (!activeTenant) return []

    return makeNavMainItems(activeTenant)
  }, [props.navMain, activeTenant])

  const navSecondary = React.useMemo(() => {
    if (props.navSecondary) return props.navSecondary
    if (!activeTenant) return []

    return makeNavSecondaryItems(activeTenant)
  }, [props.navMain, activeTenant])

  return (
    <Sidebar className="border-r-0" {...rest}>
      <SidebarHeader>
        <TeamSwitcher teams={teams} />
        <NavMain items={navMain} />
      </SidebarHeader>
      <SidebarContent>
        {/*<NavFavorites favorites={favorites} />*/}
        {/*<NavWorkspaces workspaces={workspaces} />*/}
        <NavSecondary items={navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}
