'use client'

import type { ComponentType } from 'react'
import React from 'react'
import { cn } from '../../../utils'
import type { DarkModeToggleProps } from '../../ThemeToggle'
import type { NavConfig, NavItemAnchor } from './config'
import {
  CollapseContext,
  LevelStateContextProvider,
  NavConfigContextProvider,
} from './context'
import { NavBar } from './NavBar'
import styles from './styles.module.css'

export type Props = {
  activeNav: string[]
  linkComponent?: ComponentType<{ href: string; children: React.ReactNode }>
  topNavConfig?: NavConfig
  bottomNavConfig?: NavConfig
  topNavExtendedConfig?: NavConfig
  darkModeToggle?: DarkModeToggleProps
  logo?: NavItemAnchor
}

export function VerticalNavBar({
  activeNav,
  topNavConfig,
  bottomNavConfig,
  topNavExtendedConfig,
  darkModeToggle,
  linkComponent,
  logo,
}: Props) {
  const { isCollapsed } = React.useContext(CollapseContext)

  return (
    <div
      className={cn(
        styles.verticalNavBar,
        !isCollapsed && styles.expanded,
        'group fixed z-10 hidden h-full flex-col bg-background p-6 md:flex md:px-3 md:pb-3 md:pt-5',
      )}
    >
      <NavConfigContextProvider
        topNavConfig={topNavConfig}
        bottomNavConfig={bottomNavConfig}
        topNavExtendedConfig={topNavExtendedConfig}
        linkComponent={linkComponent}
      >
        <LevelStateContextProvider navHighlight={activeNav}>
          <NavBar darkModeToggle={darkModeToggle} logo={logo} />
        </LevelStateContextProvider>
      </NavConfigContextProvider>
    </div>
  )
}