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

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>((props, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    css={tw`
      flex
      h-10
      items-center
      space-x-1
      rounded-md
      border
      border-slate-300
      bg-white
      p-1
      dark:border-slate-700
      dark:bg-slate-800
    `}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>((props, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    css={tw`
      flex
      cursor-default
      select-none
      items-center
      rounded-[0.2rem]
      py-1.5
      px-3
      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
    `}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ inset, children, ...props }, ref) => (
  <MenubarPrimitive.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" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

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

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(({ align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
  <MenubarPrimitive.Portal>
    <MenubarPrimitive.Content
      ref={ref}
      align={align}
      alignOffset={alignOffset}
      sideOffset={sideOffset}
      css={tw`
        z-50
        min-w-[12rem]
        overflow-hidden
        rounded-md
        border
        border-slate-100
        bg-white
        p-1
        text-slate-700
        shadow-md
        animate-in
        slide-in-from-top-1
        dark:border-slate-800
        dark:bg-slate-800
        dark:text-slate-400
      `}
      {...props}
    />
  </MenubarPrimitive.Portal>
))
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ inset, ...props }, ref) => (
  <MenubarPrimitive.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}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ children, checked, ...props }, ref) => (
  <MenubarPrimitive.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">
      <MenubarPrimitive.ItemIndicator>
        <Check tw="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ children, ...props }, ref) => (
  <MenubarPrimitive.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">
      <MenubarPrimitive.ItemIndicator>
        <Circle tw="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ inset, ...props }, ref) => (
  <MenubarPrimitive.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}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

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

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

const _Menubar = Menubar
export {
  _Menubar as Root,
  MenubarMenu as Menu,
  MenubarTrigger as Trigger,
  MenubarContent as Content,
  MenubarItem as Item,
  MenubarSeparator as Separator,
  MenubarLabel as Label,
  MenubarCheckboxItem as CheckboxItem,
  MenubarRadioGroup as RadioGroup,
  MenubarRadioItem as RadioItem,
  MenubarPortal as Portal,
  MenubarSubContent as SubContent,
  MenubarSubTrigger as SubTrigger,
  MenubarGroup as Group,
  MenubarSub as Sub,
  MenubarShortcut as Shortcut,
}
