Filter menu

"use client";

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

export type FilterOption = {
  /** The key reported in onValueChange. */
  value: string;
  /** Menu item text. */
  label: string;
  /** Optional count shown in mono on the right. */
  count?: number;
};

type FilterMenuProps = Omit<React.ComponentProps<typeof Button>, "value" | "onChange" | "children"> & {
  /** The options, in menu order. */
  options: FilterOption[];
  /** The checked option values. */
  value: string[];
  /** Called with the new list of checked values. */
  onValueChange: (value: string[]) => void;
  /** Trigger text. */
  label?: string;
  /** Text of the item at the bottom that unchecks everything. */
  clearLabel?: string;
  /** Which side of the trigger the menu aligns to. */
  align?: "start" | "end";
};

/**
 * A filter control: an outline pill that opens a menu of checkbox items with counts.
 * The trigger shows how many are checked and a Clear item appears when any is.
 */
export function FilterMenu({
  options,
  value,
  onValueChange,
  label = "Filter",
  clearLabel = "Clear",
  align = "start",
  variant = "outline",
  size = "sm",
  className,
  ...props
}: FilterMenuProps) {
  const active = value.length;

  const toggle = (option: string, checked: boolean) => {
    onValueChange(checked ? [...value, option] : value.filter((v) => v !== option));
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant={variant}
          size={size}
          data-active={active > 0 || undefined}
          className={cn("rounded-full", className)}
          {...props}
        >
          <ListFilterIcon data-icon="inline-start" aria-hidden="true" />
          <span>{label}</span>
          {active > 0 && (
            <>
              <span aria-hidden="true" className="text-muted-foreground">
                ·
              </span>
              <span className="font-mono text-xs">
                {active}
                <span className="sr-only"> selected</span>
              </span>
            </>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align={align} className="min-w-48 rounded-md">
        {options.map((option) => {
          const checked = value.includes(option.value);
          return (
            <DropdownMenuCheckboxItem
              key={option.value}
              checked={checked}
              onCheckedChange={(next) => toggle(option.value, next === true)}
              onSelect={(event) => event.preventDefault()}
              className="h-8 rounded-sm focus:bg-muted focus:text-foreground"
            >
              <span className="truncate">{option.label}</span>
              {option.count !== undefined && (
                <span className="ml-auto font-mono text-xs text-muted-foreground">{option.count}</span>
              )}
            </DropdownMenuCheckboxItem>
          );
        })}
        {active > 0 && (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onSelect={() => onValueChange([])}
              className="h-8 rounded-sm text-muted-foreground focus:bg-muted focus:text-foreground"
            >
              {clearLabel}
            </DropdownMenuItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}