import { DropdownMenu as M } from "radix-ui";
import type { ComponentProps, ReactNode } from "react";
import { cn } from "./cn";
import { Icon, type IconName } from "./Icon";

export const Menu = M.Root;
export const MenuTrigger = M.Trigger;
export const MenuGroup = M.Group;

export function MenuContent({ className, sideOffset = 6, ...props }: ComponentProps<typeof M.Content>) {
  return (
    <M.Portal>
      <M.Content
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[13rem] overflow-hidden rounded-xl bg-page p-1 text-ink shadow-pop data-[state=open]:animate-[context-pop_140ms_var(--ease-out-expo)]",
          className,
        )}
        {...props}
      />
    </M.Portal>
  );
}

/** A menu row: words on the left, its icon or shortcut on the right. */
export function MenuItem({
  icon,
  hint,
  tone = "default",
  className,
  children,
  ...props
}: ComponentProps<typeof M.Item> & { icon?: IconName; hint?: ReactNode; tone?: "default" | "danger" }) {
  return (
    <M.Item
      className={cn(
        "flex h-8 cursor-default items-center gap-3 rounded-lg px-2.5 text-[13px] text-body outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-quiet data-[highlighted]:text-ink",
        tone === "danger" && "text-red-text data-[highlighted]:bg-red-fill data-[highlighted]:text-red-text",
        className,
      )}
      {...props}
    >
      <span className="min-w-0 flex-1 truncate">{children}</span>
      {hint && <span className="font-mono text-[11px] text-subtle">{hint}</span>}
      {icon && <Icon name={icon} size={16} className={tone === "danger" ? "text-red-icon" : "text-muted"} />}
    </M.Item>
  );
}

export function MenuLabel({ className, ...props }: ComponentProps<typeof M.Label>) {
  return <M.Label className={cn("px-2.5 pt-2 pb-1 text-[11.5px] font-medium text-subtle", className)} {...props} />;
}

export function MenuSeparator({ className, ...props }: ComponentProps<typeof M.Separator>) {
  return <M.Separator className={cn("-mx-1 my-1 h-px bg-hairline", className)} {...props} />;
}