import * as React from 'react'
import * as RMenu from '@radix-ui/react-dropdown-menu'
import { cn } from './cva'

export const DropdownMenu = RMenu.Root
export const DropdownMenuTrigger = RMenu.Trigger
export const DropdownMenuGroup = RMenu.Group
export const DropdownMenuLabel = RMenu.Label
export const DropdownMenuSeparator = RMenu.Separator
export const DropdownMenuRadioGroup = RMenu.RadioGroup

export const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof RMenu.Content>,
  React.ComponentPropsWithoutRef<typeof RMenu.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <RMenu.Portal>
    <RMenu.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn('min-w-32 rounded-md border border-border bg-surface p-1 text-fg shadow-[var(--mod-shadow-md)]', className)}
      {...props}
    />
  </RMenu.Portal>
))
DropdownMenuContent.displayName = 'DropdownMenuContent'

export const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof RMenu.Item>,
  React.ComponentPropsWithoutRef<typeof RMenu.Item>
>(({ className, ...props }, ref) => (
  <RMenu.Item
    ref={ref}
    className={cn(
      'flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = 'DropdownMenuItem'

export const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof RMenu.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof RMenu.CheckboxItem>
>(({ className, children, ...props }, ref) => (
  <RMenu.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 inline-flex items-center justify-center">
      <RMenu.ItemIndicator aria-hidden>✓</RMenu.ItemIndicator>
    </span>
    {children}
  </RMenu.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem'

export const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof RMenu.RadioItem>,
  React.ComponentPropsWithoutRef<typeof RMenu.RadioItem>
>(({ className, children, ...props }, ref) => (
  <RMenu.RadioItem
    ref={ref}
    className={cn(
      'relative flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 inline-flex items-center justify-center">
      <RMenu.ItemIndicator aria-hidden>•</RMenu.ItemIndicator>
    </span>
    {children}
  </RMenu.RadioItem>
))
DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem'