Date preset select

"use client";

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

export type DatePreset = {
  value: string;
  label: string;
};

/** The default presets, exported so consumers can extend them. */
export const datePresets: DatePreset[] = [
  { value: "today", label: "Today" },
  { value: "yesterday", label: "Yesterday" },
  { value: "7d", label: "Last 7 days" },
  { value: "30d", label: "Last 30 days" },
  { value: "month", label: "This month" },
];

type DatePresetSelectProps = Omit<
  React.ComponentProps<typeof Button>,
  "value" | "defaultValue" | "size" | "variant" | "children"
> & {
  /** The chosen preset value. "custom" shows Custom range in the trigger. */
  value?: string;
  /** First value when uncontrolled. */
  defaultValue?: string;
  /** Called with the chosen preset value. */
  onValueChange?: (value: string) => void;
  /** Replaces the five default presets. */
  presets?: DatePreset[];
  /** Adds a Custom range item after a separator and runs when it is chosen. */
  onCustom?: () => void;
  /** Heading inside the menu. Pass null to hide it. */
  label?: string | null;
};

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

/**
 * A pill that opens a menu of date range presets as radio items.
 * An optional Custom range item hands off to your own date picker.
 */
export function DatePresetSelect({
  value,
  defaultValue = "7d",
  onValueChange,
  presets = datePresets,
  onCustom,
  label = "Date range",
  className,
  ...props
}: DatePresetSelectProps) {
  const [internal, setInternal] = React.useState(defaultValue);
  const current = value === undefined ? internal : value;
  const currentLabel =
    presets.find((p) => p.value === current)?.label ??
    (current === "custom" ? "Custom range" : (label ?? "Date range"));

  const choose = (next: string) => {
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          data-slot="date-preset-select"
          className={cn("rounded-full", className)}
          {...props}
        >
          <CalendarIcon data-icon="inline-start" aria-hidden="true" />
          {currentLabel}
          <ChevronDownIcon data-icon="inline-end" className="text-muted-foreground" aria-hidden="true" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="min-w-44 rounded-md border shadow-md ring-0">
        {label ? <DropdownMenuLabel>{label}</DropdownMenuLabel> : null}
        <DropdownMenuRadioGroup value={current} onValueChange={choose}>
          {presets.map((preset) => (
            <DropdownMenuRadioItem key={preset.value} value={preset.value} className={itemClass}>
              {preset.label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
        {onCustom ? (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuItem onSelect={onCustom} className={itemClass}>
              Custom range
            </DropdownMenuItem>
          </>
        ) : null}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}