Sort menu

"use client";

import * as React from "react";
import { ArrowUpDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";

export type SortField = {
  /** The key reported in onValueChange. */
  value: string;
  /** Menu item text, also shown in the trigger. */
  label: string;
};

export type SortDirection = "asc" | "desc";

export type SortValue = {
  field: string;
  direction: SortDirection;
};

type SortMenuProps = Omit<React.ComponentProps<typeof Button>, "value" | "onChange" | "children"> & {
  /** The fields people can sort by, in menu order. */
  fields: SortField[];
  /** The current field and direction. */
  value: SortValue;
  /** Called with the new field and direction whenever either changes. */
  onValueChange: (value: SortValue) => void;
  /** Word before the field name in the trigger. */
  label?: string;
  /** Hide the text and show only the icon. The label becomes the accessible name. */
  iconOnly?: boolean;
  /** Which side of the trigger the menu aligns to. */
  align?: "start" | "end";
};

const itemClass = "h-8 rounded-sm focus:bg-muted focus:text-foreground";

const directions: { value: SortDirection; label: string }[] = [
  { value: "asc", label: "Ascending" },
  { value: "desc", label: "Descending" },
];

/**
 * A sort control: an outline pill that opens a menu with one radio group for the field
 * and one for the direction. Controlled: pass value and onValueChange.
 */
export function SortMenu({
  fields,
  value,
  onValueChange,
  label = "Sort",
  iconOnly = false,
  align = "start",
  variant = "outline",
  size = "sm",
  className,
  ...props
}: SortMenuProps) {
  const current = fields.find((f) => f.value === value.field);
  const direction = directions.find((d) => d.value === value.direction)?.label ?? "";
  const name = `${label}: ${current?.label ?? ""}`;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant={variant}
          size={iconOnly ? (size === "sm" ? "icon-sm" : "icon") : size}
          aria-label={iconOnly ? `${name}, ${direction.toLowerCase()}` : undefined}
          className={cn("rounded-full", className)}
          {...props}
        >
          <ArrowUpDownIcon data-icon={iconOnly ? undefined : "inline-start"} aria-hidden="true" />
          {!iconOnly && (
            <span>
              {name}
              <span className="sr-only">, {direction.toLowerCase()}</span>
            </span>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align={align} className="min-w-44 rounded-md">
        <DropdownMenuRadioGroup
          value={value.field}
          onValueChange={(field) => onValueChange({ ...value, field })}
          aria-label="Sort by"
        >
          {fields.map((field) => (
            <DropdownMenuRadioItem key={field.value} value={field.value} className={itemClass}>
              {field.label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup
          value={value.direction}
          onValueChange={(d) => onValueChange({ ...value, direction: d as SortDirection })}
          aria-label="Direction"
        >
          {directions.map((d) => (
            <DropdownMenuRadioItem key={d.value} value={d.value} className={itemClass}>
              {d.label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}