import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { ChevronDown } from 'lucide-react'
import tw, { TwStyle } from 'twin.macro'

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>((props, ref) => (
  <div tw="absolute left-0 top-full flex justify-center">
    <NavigationMenuPrimitive.Viewport
      css={tw`
        origin-center
        relative
        mt-1.5
        h-[var(--radix-navigation-menu-viewport-height)]
        w-full
        overflow-hidden
        rounded-md
        border
        border-slate-200
        bg-white
        shadow-lg
        data-[state=open]:animate-in
        data-[state=closed]:animate-out
        data-[state=open]:zoom-in-90
        data-[state=closed]:zoom-out-95
        dark:border-slate-700
        dark:bg-slate-800
        md:w-[var(--radix-navigation-menu-viewport-width)]
      `}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    tw="relative z-10 flex flex-1 items-center justify-center"
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>((props, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className="group"
    tw="flex flex-1 list-none items-center justify-center"
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const NAVIGATION_MENU_TRIGGER_STYLE: TwStyle = tw`
  inline-flex
  items-center
  justify-center
  rounded-md
  text-sm
  font-medium
  transition-colors
  focus:outline-none
  focus:bg-slate-100
  disabled:opacity-50
  dark:focus:bg-slate-800
  disabled:pointer-events-none
  bg-transparent
  hover:bg-slate-100
  dark:hover:bg-slate-800
  dark:text-slate-100
  dark:hover:text-slate-100
  data-[state=open]:bg-slate-50
  dark:data-[state=open]:bg-slate-800
  data-[active]:bg-slate-50
  dark:data-[active]:bg-slate-800
  h-10
  py-2
  px-4
  w-max
`

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className="group"
    css={[NAVIGATION_MENU_TRIGGER_STYLE]}
    {...props}
  >
    {children}{' '}
    <ChevronDown
      tw="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>((props, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    css={tw`
      top-0
      left-0
      w-full
      data-[motion^=from-]:animate-in
      data-[motion^=to-]:animate-out
      data-[motion^=from-]:fade-in
      data-[motion^=to-]:fade-out
      data-[motion=to-start]:slide-out-to-left-52
      data-[motion=to-end]:slide-out-to-right-52
      data-[motion=from-start]:slide-in-from-left-52
      data-[motion=from-end]:slide-in-from-right-52
      md:absolute md:w-auto
    `}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>((props, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    css={tw`
      top-full
      z-[1]
      flex
      h-1.5
      items-end
      justify-center
      overflow-hidden
      data-[state=visible]:animate-in
      data-[state=hidden]:animate-out
      data-[state=visible]:fade-in
      data-[state=hidden]:fade-out
    `}
    {...props}
  >
    <div tw="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-slate-200 shadow-md dark:bg-slate-800" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

const _NavigationMenu = NavigationMenu
export {
  _NavigationMenu as Root,
  NavigationMenuList as List,
  NavigationMenuItem as Item,
  NavigationMenuContent as Content,
  NavigationMenuTrigger as Trigger,
  NavigationMenuLink as Link,
  NavigationMenuIndicator as Indicator,
  NavigationMenuViewport as Viewport,
  NAVIGATION_MENU_TRIGGER_STYLE,
}
