import { Menu as MenuPrimitive } from "@base-ui/react/menu";

import { cn } from "@/lib/utils";
import { CheckIcon, ChevronRightIcon } from "lucide-react";

function DropdownMenu({ ...props }) {
  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}

function DropdownMenuPortal({ ...props }) {
  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}

function DropdownMenuTrigger({ ...props }) {
  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}

function DropdownMenuContent({
  align = "start",
  alignOffset = 0,
  side = "bottom",
  sideOffset = 4,
  className,
  ...props
}) {
  return (
    <MenuPrimitive.Portal>
      <MenuPrimitive.Positioner
        className="ino:isolate ino:z-[100003] ino:outline-none"
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
      >
        <MenuPrimitive.Popup
          data-slot="dropdown-menu-content"
          className={cn(
            "ino: ino: ino:z-50 ino:max-h-(--available-height) ino:w-(--anchor-width) ino:min-w-32 ino:origin-(--transform-origin) ino:overflow-x-hidden ino:overflow-y-auto ino:rounded-md ino:bg-popover ino:p-1 ino:text-popover-foreground ino:shadow-md ino:ring-1 ino:ring-foreground/10 ino:duration-100 ino:outline-none ino:data-[side=bottom]:slide-in-from-top-2 ino:data-[side=inline-end]:slide-in-from-left-2 ino:data-[side=inline-start]:slide-in-from-right-2 ino:data-[side=left]:slide-in-from-right-2 ino:data-[side=right]:slide-in-from-left-2 ino:data-[side=top]:slide-in-from-bottom-2 ino:data-open:animate-in ino:data-open:fade-in-0 ino:data-open:zoom-in-95 ino:data-closed:animate-out ino:data-closed:overflow-hidden ino:data-closed:fade-out-0 ino:data-closed:zoom-out-95",
            className,
          )}
          {...props}
        />
      </MenuPrimitive.Positioner>
    </MenuPrimitive.Portal>
  );
}

function DropdownMenuGroup({ ...props }) {
  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}

function DropdownMenuLabel({ className, inset, ...props }) {
  return (
    <MenuPrimitive.GroupLabel
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        "ino:px-2 ino:py-1.5 ino:text-xs ino:font-medium ino:text-muted-foreground ino:data-inset:pl-8",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
  return (
    <MenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "ino:group/dropdown-menu-item ino:relative ino:flex ino:cursor-default ino:items-center ino:gap-2 ino:rounded-sm ino:px-2 ino:py-1.5 ino:text-sm ino:outline-hidden ino:select-none ino:focus:bg-accent ino:focus:text-accent-foreground ino:not-data-[variant=destructive]:focus:**:text-accent-foreground ino:data-inset:pl-8 ino:data-[variant=destructive]:text-destructive ino:data-[variant=destructive]:focus:bg-destructive/10 ino:data-[variant=destructive]:focus:text-destructive ino:dark:data-[variant=destructive]:focus:bg-destructive/20 ino:data-disabled:pointer-events-none ino:data-disabled:opacity-50 ino:[&_svg]:pointer-events-none ino:[&_svg]:shrink-0 ino:[&_svg:not([class*=size-])]:size-4 ino:data-[variant=destructive]:*:[svg]:text-destructive",
        className,
      )}
      {...props}
    />
  );
}

function DropdownMenuSub({ ...props }) {
  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
}

function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
  return (
    <MenuPrimitive.SubmenuTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "ino:flex ino:cursor-default ino:items-center ino:gap-2 ino:rounded-sm ino:px-2 ino:py-1.5 ino:text-sm ino:outline-hidden ino:select-none ino:focus:bg-accent ino:focus:text-accent-foreground ino:not-data-[variant=destructive]:focus:**:text-accent-foreground ino:data-inset:pl-8 ino:data-popup-open:bg-accent ino:data-popup-open:text-accent-foreground ino:data-open:bg-accent ino:data-open:text-accent-foreground ino:[&_svg]:pointer-events-none ino:[&_svg]:shrink-0 ino:[&_svg:not([class*=size-])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ino:ml-auto" />
    </MenuPrimitive.SubmenuTrigger>
  );
}

function DropdownMenuSubContent({
  align = "start",
  alignOffset = -3,
  side = "right",
  sideOffset = 0,
  className,
  ...props
}) {
  return (
    <DropdownMenuContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        "ino: ino: ino:w-auto ino:min-w-24 ino:rounded-md ino:bg-popover ino:p-1 ino:text-popover-foreground ino:shadow-lg ino:ring-1 ino:ring-foreground/10 ino:duration-100 ino:data-[side=bottom]:slide-in-from-top-2 ino:data-[side=left]:slide-in-from-right-2 ino:data-[side=right]:slide-in-from-left-2 ino:data-[side=top]:slide-in-from-bottom-2 ino:data-open:animate-in ino:data-open:fade-in-0 ino:data-open:zoom-in-95 ino:data-closed:animate-out ino:data-closed:fade-out-0 ino:data-closed:zoom-out-95",
        className,
      )}
      align={align}
      alignOffset={alignOffset}
      side={side}
      sideOffset={sideOffset}
      {...props}
    />
  );
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  inset,
  ...props
}) {
  return (
    <MenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      data-inset={inset}
      className={cn(
        "ino:relative ino:flex ino:cursor-default ino:items-center ino:gap-2 ino:rounded-sm ino:py-1.5 ino:pr-8 ino:pl-2 ino:text-sm ino:outline-hidden ino:select-none ino:focus:bg-accent ino:focus:text-accent-foreground ino:focus:**:text-accent-foreground ino:data-inset:pl-8 ino:data-disabled:pointer-events-none ino:data-disabled:opacity-50 ino:[&_svg]:pointer-events-none ino:[&_svg]:shrink-0 ino:[&_svg:not([class*=size-])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span
        className="ino:pointer-events-none ino:absolute ino:right-2 ino:flex ino:items-center ino:justify-center"
        data-slot="dropdown-menu-checkbox-item-indicator"
      >
        <MenuPrimitive.CheckboxItemIndicator>
          <CheckIcon />
        </MenuPrimitive.CheckboxItemIndicator>
      </span>
      {children}
    </MenuPrimitive.CheckboxItem>
  );
}

function DropdownMenuRadioGroup({ ...props }) {
  return (
    <MenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  );
}

function DropdownMenuRadioItem({ className, children, inset, ...props }) {
  return (
    <MenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      data-inset={inset}
      className={cn(
        "ino:relative ino:flex ino:cursor-default ino:items-center ino:gap-2 ino:rounded-sm ino:py-1.5 ino:pr-8 ino:pl-2 ino:text-sm ino:outline-hidden ino:select-none ino:focus:bg-accent ino:focus:text-accent-foreground ino:focus:**:text-accent-foreground ino:data-inset:pl-8 ino:data-disabled:pointer-events-none ino:data-disabled:opacity-50 ino:[&_svg]:pointer-events-none ino:[&_svg]:shrink-0 ino:[&_svg:not([class*=size-])]:size-4",
        className,
      )}
      {...props}
    >
      <span
        className="ino:pointer-events-none ino:absolute ino:right-2 ino:flex ino:items-center ino:justify-center"
        data-slot="dropdown-menu-radio-item-indicator"
      >
        <MenuPrimitive.RadioItemIndicator>
          <CheckIcon />
        </MenuPrimitive.RadioItemIndicator>
      </span>
      {children}
    </MenuPrimitive.RadioItem>
  );
}

function DropdownMenuSeparator({ className, ...props }) {
  return (
    <MenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn("ino:-mx-1 ino:my-1 ino:h-px ino:bg-border", className)}
      {...props}
    />
  );
}

function DropdownMenuShortcut({ className, ...props }) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        "ino:ml-auto ino:text-xs ino:tracking-widest ino:text-muted-foreground ino:group-focus/dropdown-menu-item:text-accent-foreground",
        className,
      )}
      {...props}
    />
  );
}

export {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
};
