'use client'

import React from 'react'
import { cn } from '../../../../../utils'
import type {
  NavItemAction,
  NavItemAnchor,
  NavEntry as NavEntryType,
} from '../../config'
import { LevelStateContext, CollapseContext } from '../../context'
import { BackButton, CloseButton } from '../../icons'
import styles from '../../styles.module.css'
import { NavListAction, NavListAnchor } from '../List'
import { NavEntry } from '../Primitives'

export function NavLevel3Action({ entry }: { entry: NavItemAction }) {
  return <NavListAction entry={entry} />
}

export function NavLevel3Anchor({ entry }: { entry: NavItemAnchor }) {
  return <NavListAnchor entry={entry} />
}

export function NavLevel3Entry({ entry }: { entry: NavEntryType }) {
  return (
    <NavEntry
      {...{
        entry,
        Anchor: NavLevel3Anchor,
        Action: NavLevel3Action,
        Parent: () => null,
      }}
    />
  )
}

function NavLevel3Header({ label }: { label: string }) {
  const { collapse } = React.useContext(CollapseContext)
  const { toggleParent, reset } = React.useContext(LevelStateContext)
  return (
    <div className="flex h-8 w-full flex-row items-center justify-between">
      <BackButton onClick={() => toggleParent(null)} />
      <span className="text-base font-[--font-weight-medium] text-foreground">
        {label}
      </span>
      <CloseButton
        onClick={() => {
          reset()
          collapse()
        }}
      />
    </div>
  )
}

export function NavLevel3({
  label,
  entries,
}: {
  label: string
  entries: NavEntryType[]
}) {
  return (
    <div
      className={cn(
        styles.navLevel3,
        'fixed left-0 top-0 z-50 flex h-screen w-screen flex-col gap-3 overflow-y-auto bg-background p-6',
      )}
    >
      <NavLevel3Header label={label} />
      <hr className="bg-platform-navigation-muted-more-foreground" />
      <ul className={cn(styles.navList, 'gap-3')}>
        {entries.map((entry) => (
          <NavLevel3Entry key={entry.label} entry={entry} />
        ))}
      </ul>
    </div>
  )
}