import * as React from 'react'

import * as NavigationMenuPrimitive from './index'

const components: { title: string; href: string; description: string }[] = [
  {
    title: 'Alert Dialog',
    href: '/docs/primitives/alert-dialog',
    description:
      'A modal dialog that interrupts the user with important content and expects a response.',
  },
  {
    title: 'Hover Card',
    href: '/docs/primitives/hover-card',
    description:
      'For sighted users to preview content available behind a link.',
  },
  {
    title: 'Progress',
    href: '/docs/primitives/progress',
    description:
      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
  },
  {
    title: 'Scroll-area',
    href: '/docs/primitives/scroll-area',
    description: 'Visually or semantically separates content.',
  },
  {
    title: 'Tabs',
    href: '/docs/primitives/tabs',
    description:
      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
  },
  {
    title: 'Tooltip',
    href: '/docs/primitives/tooltip',
    description:
      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
  },
]

export default () => (
  <NavigationMenuPrimitive.Root>
    <NavigationMenuPrimitive.List>
      <NavigationMenuPrimitive.Item>
        <NavigationMenuPrimitive.Trigger>
          Getting started
        </NavigationMenuPrimitive.Trigger>
        <NavigationMenuPrimitive.Content>
          <ul tw="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
            <li tw="row-span-3">
              <NavigationMenuPrimitive.Link asChild>
                <a
                  tw="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-rose-500 to-indigo-700 p-6 no-underline outline-none focus:shadow-md"
                  href="/"
                >
                  <p tw="text-sm leading-tight text-white/90">
                    Beautifully designed components built with Radix UI and
                    Tailwind CSS.
                  </p>
                </a>
              </NavigationMenuPrimitive.Link>
            </li>
            <ListItem href="/docs" title="Introduction">
              Re-usable components built using Radix UI and Tailwind CSS.
            </ListItem>
            <ListItem href="/docs/installation" title="Installation">
              How to install dependencies and structure your app.
            </ListItem>
            <ListItem href="/docs/primitives/typography" title="Typography">
              Styles for headings, paragraphs, lists...etc
            </ListItem>
          </ul>
        </NavigationMenuPrimitive.Content>
      </NavigationMenuPrimitive.Item>
      <NavigationMenuPrimitive.Item>
        <NavigationMenuPrimitive.Trigger>
          Components
        </NavigationMenuPrimitive.Trigger>
        <NavigationMenuPrimitive.Content>
          <ul tw="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
            {components.map((component) => (
              <ListItem
                key={component.title}
                title={component.title}
                href={component.href}
              >
                {component.description}
              </ListItem>
            ))}
          </ul>
        </NavigationMenuPrimitive.Content>
      </NavigationMenuPrimitive.Item>
      <NavigationMenuPrimitive.Item>
        <a href="/docs">
          <NavigationMenuPrimitive.Link
            css={[NavigationMenuPrimitive.NAVIGATION_MENU_TRIGGER_STYLE]}
          >
            Documentation
          </NavigationMenuPrimitive.Link>
        </a>
      </NavigationMenuPrimitive.Item>
    </NavigationMenuPrimitive.List>
  </NavigationMenuPrimitive.Root>
)

const ListItem = React.forwardRef<
  React.ElementRef<'a'>,
  React.ComponentPropsWithoutRef<'a'>
>(({ title, children, ...props }, ref) => (
  <li>
    <NavigationMenuPrimitive.Link asChild>
      <a
        ref={ref}
        tw="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
        {...props}
      >
        <div tw="text-sm font-medium leading-none">{title}</div>
        <p tw="line-clamp-2 text-sm leading-snug text-slate-500 dark:text-slate-400">
          {children}
        </p>
      </a>
    </NavigationMenuPrimitive.Link>
  </li>
))
ListItem.displayName = 'ListItem'
