import {ComponentProps, ReactNode} from 'react'
import Link from 'next/link'
import * as Primitive from '@radix-ui/react-navigation-menu'
import {ChevronDownIcon, ChevronUpIcon} from 'lucide-react'
import {Button, buttonVariants} from './button'
import {merge} from '@/lib/utils'

const NavigationMenuItemStyle = buttonVariants({
  theme: 'text',
  color: `primary`,
  className: 'h-full rounded-none',
})

function Navigation(props: ComponentProps<typeof Primitive.Root>) {
  return <Primitive.Root {...props} delayDuration={0} skipDelayDuration={0}/>
}

function NavigationGroup(props: ComponentProps<typeof Primitive.List>) {
  return <Primitive.List {...props} className={merge('h-full flex items-stretch', props.className)}/>
}

function NavigationItem(props: ComponentProps<typeof Primitive.Item>) {
  return <Primitive.Item {...props}/>
}

function NavigationLink(props: {
  text: ReactNode
  href: string
  classNameOverride?: string
}) {
  return (
    <Primitive.Link asChild className={merge(props.classNameOverride ?? NavigationMenuItemStyle, 'text-lg')}>
      <Link href={props.href}>
        {props.text}
      </Link>
    </Primitive.Link>
  )
}

function NavigationTrigger(props: {
  suffix?: boolean
  text: ReactNode
}) {
  const suffix = props.suffix ?? true

  return (
    <Primitive.Trigger asChild>
      <Button theme="text" className="text-lg gap-2 h-full group/trigger">
        {props.text}
        {suffix && (
          <ChevronUpIcon
            className="size-4 transition-transform duration-150 ease-in-out rotate-0 group-data-[state=open]/trigger:rotate-180"
          />
        )}
      </Button>
    </Primitive.Trigger>
  )
}

function NavigationItemContent(props: ComponentProps<typeof Primitive.Content>) {
  return (
    <Primitive.Content {...props}/>
  )
}

function NavigationLinkItem(props: {
  href: string
  text: ReactNode
}) {
  return (
    <Primitive.Item>
      <NavigationLink {...props}/>
    </Primitive.Item>
  )
}

function NavigationTriggerItem(props: {
  text: ReactNode
  suffix?: boolean
  children?: ReactNode
  className?: string
}) {
  return (
    <Primitive.Item>
      <NavigationTrigger text={props.text} suffix={props.suffix}/>
      <NavigationItemContent className={props.className}>
        {props.children}
      </NavigationItemContent>
    </Primitive.Item>
  )
}

function NavigationIndicator() {
  return (
    <Primitive.Indicator className={merge(
      'w-full h-1 rounded-xs bg-primary z-10 top-[calc(100%-4px)]',
      'transition-transform duration-150 ease-out',
      'data-[state=visible]:animate-fadein',
      'data-[state=hidden]:animate-fadeout',
    )}/>
  )
}

function NavigationMenuViewport(props: ComponentProps<typeof Primitive.Viewport>) {
  return (
    <div className={props.className}>
      <Primitive.Viewport
        {...props}
        className="data-[state=open]:animate-fadein data-[state=closed]:animate-fadeout"
      />
    </div>
  )
}

export {
  Navigation,
  NavigationGroup,
  NavigationItem,
  NavigationItemContent,
  NavigationTrigger,
  NavigationLink,
  NavigationIndicator,
  NavigationMenuViewport,
  NavigationLinkItem,
  NavigationTriggerItem,
}
