import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'
import tw from 'twin.macro'

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    css={[
      tw`
        flex
        cursor-default
        select-none
        items-center
        rounded-sm
        py-1.5
        px-2
        text-sm
        font-medium
        outline-none
        focus:bg-slate-100
        data-[state=open]:bg-slate-100
        dark:focus:bg-slate-700
        dark:data-[state=open]:bg-slate-700
      `,
      inset && tw`pl-8`,
    ]}
    {...props}
  >
    {children}
    <ChevronRight tw="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>((props, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    css={tw`
      z-50
      min-w-[8rem]
      overflow-hidden
      rounded-md
      border
      border-slate-100
      bg-white
      p-1
      text-slate-700
      shadow-md
      animate-in
      slide-in-from-left-1
      dark:border-slate-800
      dark:bg-slate-800
      dark:text-slate-400
    `}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      css={tw`
        z-50
        min-w-[8rem]
        overflow-hidden
        rounded-md
        border
        border-slate-100
        bg-white
        p-1
        text-slate-700
        shadow-md
        animate-in
        data-[side=right]:slide-in-from-left-2
        data-[side=left]:slide-in-from-right-2
        data-[side=bottom]:slide-in-from-top-2
        data-[side=top]:slide-in-from-bottom-2
        dark:border-slate-800
        dark:bg-slate-800
        dark:text-slate-400
      `}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    css={[
      tw`
        relative
        flex
        cursor-default
        select-none
        items-center
        rounded-sm
        py-1.5
        px-2
        text-sm
        font-medium
        outline-none
        focus:bg-slate-100
        data-[disabled]:pointer-events-none
        data-[disabled]:opacity-50
        dark:focus:bg-slate-700
      `,
      inset && tw`pl-8`,
    ]}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    css={tw`
      relative
      flex
      cursor-default
      select-none
      items-center
      rounded-sm
      py-1.5
      pl-8
      pr-2
      text-sm
      font-medium
      outline-none
      focus:bg-slate-100
      data-[disabled]:pointer-events-none
      data-[disabled]:opacity-50
      dark:focus:bg-slate-700
    `}
    checked={checked}
    {...props}
  >
    <span tw="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check tw="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    css={tw`
      relative
      flex
      cursor-default
      select-none
      items-center
      rounded-sm
      py-1.5
      pl-8
      pr-2
      text-sm
      font-medium
      outline-none
      focus:bg-slate-100
      data-[disabled]:pointer-events-none
      data-[disabled]:opacity-50
      dark:focus:bg-slate-700
    `}
    {...props}
  >
    <span tw="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle tw="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    css={[
      tw`px-2 py-1.5 text-sm font-semibold text-slate-900 dark:text-slate-300`,
      inset && tw`pl-8`,
    ]}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>((props, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    tw="-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700"
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

function DropdownMenuShortcut({
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) {
  return <span tw="ml-auto text-xs tracking-widest text-slate-500" {...props} />
}
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

const _DropdownMenu = DropdownMenu
export {
  _DropdownMenu as Root,
  DropdownMenuTrigger as Trigger,
  DropdownMenuContent as Content,
  DropdownMenuItem as Item,
  DropdownMenuCheckboxItem as CheckboxItem,
  DropdownMenuRadioItem as RadioItem,
  DropdownMenuLabel as Label,
  DropdownMenuSeparator as Separator,
  DropdownMenuShortcut as Shortcut,
  DropdownMenuGroup as Group,
  DropdownMenuPortal as Portal,
  DropdownMenuSub as Sub,
  DropdownMenuSubContent as SubContent,
  DropdownMenuSubTrigger as SubTrigger,
  DropdownMenuRadioGroup as RadioGroup,
}
