Dropdown Menu

"use client";

import type { ReactNode } from "react";
import { DropdownMenu as DM } from "radix-ui";
import { Check, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DropdownMenuItem {
  type?: "item" | "checkbox" | "separator" | "label" | "sub";
  label?: string;
  icon?: ReactNode;
  shortcut?: string;
  danger?: boolean;
  checked?: boolean;
  onSelect?: () => void;
  onCheckedChange?: (checked: boolean) => void;
  items?: DropdownMenuItem[];
}

export interface DropdownMenuProps {
  trigger: ReactNode;
  items: DropdownMenuItem[];
  align?: "start" | "center" | "end";
  /** DA scope re-applied inside the portal. */
  da?: string;
}

const CONTENT =
  "da-stroke z-50 min-w-56 rounded-da-md bg-da-surface bg-none p-1.5 text-da-surface-fg shadow-da-lg backdrop-blur-[40px] backdrop-saturate-150 transition-[opacity,scale] duration-(--da-duration) ease-da-emphasized starting:scale-95 starting:opacity-0";
const ITEM =
  "relative flex cursor-default items-center gap-2.5 rounded-da-sm px-2.5 py-2 text-sm outline-none select-none data-disabled:opacity-50 data-highlighted:bg-da-secondary [&_svg]:size-4 [&_svg]:text-da-muted-fg";

function Items({ items, da }: { items: DropdownMenuItem[]; da: string }) {
  return (
    <>
      {items.map((it, i) => {
        if (it.type === "separator") return <DM.Separator key={i} className="my-1 h-px bg-da-border-strong" />;
        if (it.type === "label")
          return (
            <DM.Label key={i} className="px-2.5 pt-2 pb-1 text-xs font-semibold text-da-muted-fg">
              {it.label}
            </DM.Label>
          );
        if (it.type === "checkbox")
          return (
            <DM.CheckboxItem key={i} checked={it.checked} onCheckedChange={it.onCheckedChange} className={cn(ITEM, "pl-8")}>
              <DM.ItemIndicator className="absolute left-2.5">
                <Check aria-hidden className="!text-da-primary" />
              </DM.ItemIndicator>
              {it.label}
            </DM.CheckboxItem>
          );
        if (it.type === "sub")
          return (
            <DM.Sub key={i}>
              <DM.SubTrigger className={cn(ITEM, "data-[state=open]:bg-da-secondary")}>
                {it.icon}
                {it.label}
                <ChevronRight aria-hidden className="ml-auto" />
              </DM.SubTrigger>
              <DM.Portal>
                <DM.SubContent data-da={da} sideOffset={6} className={CONTENT}>
                  <Items items={it.items ?? []} da={da} />
                </DM.SubContent>
              </DM.Portal>
            </DM.Sub>
          );
        return (
          <DM.Item key={i} onSelect={it.onSelect} className={cn(ITEM, it.danger && "text-da-danger data-highlighted:bg-da-danger/10 [&_svg]:text-da-danger")}>
            {it.icon}
            {it.label}
            {it.shortcut && <kbd className="ml-auto font-da-mono text-[11px] text-da-muted-fg">{it.shortcut}</kbd>}
          </DM.Item>
        );
      })}
    </>
  );
}

/** Frosted dropdown menu (Radix DropdownMenu) driven by an items array: icons, shortcuts, labels, separators, checkbox items, submenus, danger item. */
export function DropdownMenu({ trigger, items, align = "end", da = "glass" }: DropdownMenuProps) {
  return (
    <DM.Root>
      <DM.Trigger asChild>{trigger}</DM.Trigger>
      <DM.Portal>
        <DM.Content data-da={da} align={align} sideOffset={8} collisionPadding={12} className={CONTENT}>
          <Items items={items} da={da} />
        </DM.Content>
      </DM.Portal>
    </DM.Root>
  );
}

export default DropdownMenu;