DropMenu

"use client";

import * as React from "react";
import * as PopoverPrimitive from "@/registry/rck/primitives/popover";
import { cn } from "@/lib/utils";
import { Icon, type IconName } from "@/registry/rck/ui/icon";

export const DropMenu = PopoverPrimitive.Root;

export const DropMenuTrigger = React.forwardRef<
  HTMLButtonElement,
  React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
>(({ asChild, ...props }, ref) => (
  <PopoverPrimitive.Trigger ref={ref} asChild={asChild} {...props} aria-haspopup="menu" />
));
DropMenuTrigger.displayName = "DropMenuTrigger";

export const DropMenuContent = React.forwardRef<
  HTMLDivElement,
  Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, "placement"> & {
    side?: "top" | "right" | "bottom" | "left";
  }
>(({ className, align = "end", side = "bottom", sideOffset = 6, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      role="menu"
      aria-orientation="vertical"
      align={align}
      placement={side}
      sideOffset={sideOffset}
      className={cn(
        "border-border bg-popover text-popover-foreground z-50 min-w-[12rem] overflow-hidden rounded-lg border p-1 shadow-md outline-none",
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
        "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
));
DropMenuContent.displayName = "DropMenuContent";

export function DropMenuLabel({
  className,
  inset = false,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }) {
  return (
    <div
      role="presentation"
      data-slot="drop-menu-label"
      className={cn(
        "text-muted-foreground px-2 py-1.5 text-[11px] font-semibold",
        inset && "pl-8",
        className,
      )}
      {...props}
    />
  );
}

export function DropMenuSeparator({
  className,
  ...props
}: React.HTMLAttributes<HTMLHRElement>) {
  return (
    <hr
      role="separator"
      aria-orientation="horizontal"
      data-slot="drop-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px border-0", className)}
      {...props}
    />
  );
}

export function DropMenuGroup({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      role="group"
      data-slot="drop-menu-group"
      className={cn("flex flex-col gap-0.5", className)}
      {...props}
    />
  );
}

export interface DropMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  inset?: boolean;
  destructive?: boolean;
  icon?: IconName;
  /** Fires before the menu closes. */
  onSelect?: () => void;
}

export const DropMenuItem = React.forwardRef<HTMLButtonElement, DropMenuItemProps>(
  (
    {
      className,
      inset = false,
      destructive = false,
      icon,
      children,
      disabled,
      onSelect,
      onClick,
      ...props
    },
    ref,
  ) => {
    return (
      <PopoverPrimitive.Close asChild>
        <button
          ref={ref}
          type="button"
          role="menuitem"
          disabled={disabled}
          className={cn(
            "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-[11px] font-medium transition-colors outline-none",
            "focus-visible:bg-surface-2 focus-visible:text-foreground",
            "disabled:pointer-events-none disabled:opacity-50",
            destructive
              ? "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10"
              : "text-foreground hover:bg-surface-2",
            inset && "pl-8",
            className,
          )}
          onClick={(event) => {
            onClick?.(event);
            if (!event.defaultPrevented) onSelect?.();
          }}
          {...props}
        >
          {icon ? <Icon name={icon} size="xs" className="text-muted-foreground" /> : null}
          <span className="flex-1 truncate">{children}</span>
        </button>
      </PopoverPrimitive.Close>
    );
  },
);
DropMenuItem.displayName = "DropMenuItem";

export interface DropMenuCheckboxItemProps extends DropMenuItemProps {
  checked?: boolean;
}

export const DropMenuCheckboxItem = React.forwardRef<
  HTMLButtonElement,
  DropMenuCheckboxItemProps
>(({ className, checked, children, ...props }, ref) => {
  return (
    <DropMenuItem ref={ref} className={cn("relative pr-8", className)} {...props}>
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        {checked ? <Icon name="check" size="xs" className="text-primary" /> : null}
      </span>
      {children}
    </DropMenuItem>
  );
});
DropMenuCheckboxItem.displayName = "DropMenuCheckboxItem";