'use client'

import React from 'react'
import { SvgTaillessLineArrowRight1 } from '@chainlink/blocks-icons'
import { useIsMediumMediaQuery } from '../../../../../hooks/MediaQueries/useMediaQuery'
import { cn } from '../../../../../utils'
import type {
  NavEntry as NavEntryType,
  NavItemAction,
  NavItemAnchor,
  NavParent,
} from '../../config'
import { LevelStateContext } from '../../context'
import styles from '../../styles.module.css'
import { NavListAction, NavListAnchor } from '../List'
import { NavIndicator } from '../List/NavIndicator'
import { NavEntry } from '../Primitives'
import { NavLevel3 } from './NavLevel3'

export function NavLevel2Action({
  entry,
  after,
}: {
  entry: NavItemAction
  after?: React.ReactNode
}) {
  return <NavListAction entry={entry} after={after} />
}

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

function NavLevel2Parent({ entry }: { entry: NavParent }) {
  const { expandedParent, toggleParent } = React.useContext(LevelStateContext)
  const isMedium = useIsMediumMediaQuery()

  if (!isMedium) {
    const firstItem = entry.items[0]
    if (!firstItem) return null
    if ('items' in firstItem) {
      return (
        <NavLevel2Entry
          entry={{ ...firstItem, label: entry.label, items: firstItem.items }}
        />
      )
    }
    // If not a NavParent, ensure all required properties for NavEntry are present
    return (
      <NavLevel2Entry entry={{ ...firstItem, label: entry.label, items: [] }} />
    )
  }

  const isExpandedParent = expandedParent === entry.label
  const onClick = () => toggleParent(entry.label)
  return (
    <div data-menu-parent={entry.label}>
      <NavLevel2Action
        entry={{ ...entry, onClick }}
        after={
          <SvgTaillessLineArrowRight1
            width={16}
            height={16}
            color="platform-navigation-muted-more"
          />
        }
      />
      {isExpandedParent && (
        <NavLevel3 label={entry.label} entries={entry.items} />
      )}
    </div>
  )
}

export function NavLevel2Entry({ entry }: { entry: NavEntryType }) {
  return (
    <NavEntry
      {...{
        entry,
        Anchor: NavLevel2Anchor,
        Action: NavLevel2Action,
        Parent: NavLevel2Parent,
      }}
    />
  )
}

export function NavLevel2({
  entries,
  isExpandedParent,
}: {
  entries: NavEntryType[]
  isExpandedParent: boolean
}) {
  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)
  const { navHighlight } = React.useContext(LevelStateContext)

  const activeIndex =
    entries.findIndex((entry) => entry.label === navHighlight?.[0]) ?? -1
  const currentIndex = hoveredIndex ?? activeIndex

  return (
    <div className={cn(styles.navLevel2, isExpandedParent && styles.expanded)}>
      <NavIndicator activeIndex={currentIndex} />
      <ul className={styles.navList}>
        {entries.map((entry, index) => (
          <div
            key={entry.label}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
          >
            <NavLevel2Entry entry={entry} />
          </div>
        ))}
      </ul>
    </div>
  )
}