Combobox / Command

"use client";

import * as React from "react";
import {
  Calculator,
  Check,
  ChevronsUpDown,
  CreditCard,
  FilePlus,
  Settings,
  Smile,
  User,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

/**
 * Live Combobox / Command example — the filterable-list primitive in its two
 * documented compositions.
 *
 *  - Combobox: <Command> inside a <Popover>, opened by an Input-styled
 *    disclosure button, committing one value. DOM focus moves into the
 *    <CommandInput> on open and back to the button on commit / dismiss. Arrow
 *    keys move the active row and do NOT wrap; substring filtering hides
 *    non-matching rows from the layout and the a11y tree. The "Prefix match
 *    only" checkbox swaps the `filter` prop at runtime — the list, empty
 *    state, and active row all re-reconcile against the new predicate.
 *  - Command palette: <CommandDialog> composes the public Dialog API, so it
 *    inherits the real focus trap and focus restore. The ⌘K / Ctrl+K shortcut
 *    is wired HERE, by the caller — the component ships no global key listener.
 */

const FRAMEWORKS = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "nuxt", label: "Nuxt" },
  { value: "svelte", label: "SvelteKit" },
  { value: "solid", label: "SolidStart" },
];

const TRIGGER_CLASS =
  "flex h-10 w-64 items-center justify-between gap-2 rounded-sm border-[length:var(--scale-px)] border-solid border-input bg-background px-3 text-sm leading-normal text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";

/** Match only when the label starts with the query — a runtime `filter` swap. */
function prefixFilter(value: string, search: string): boolean {
  return value.toLowerCase().startsWith(search.trim().toLowerCase());
}

export function CommandShowcase() {
  const [comboOpen, setComboOpen] = React.useState(false);
  const [framework, setFramework] = React.useState<string>("");
  const [prefixOnly, setPrefixOnly] = React.useState(false);
  const comboTriggerRef = React.useRef<HTMLButtonElement>(null);

  const [paletteOpen, setPaletteOpen] = React.useState(false);
  const [lastAction, setLastAction] = React.useState<string | null>(null);

  React.useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        setPaletteOpen((open) => !open);
      }
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, []);

  function runCommand(name: string) {
    setLastAction(name);
    setPaletteOpen(false);
  }

  const selectedLabel = FRAMEWORKS.find((f) => f.value === framework)?.label;

  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-1.5">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Combobox — Popover + Command
        </h3>
        <Label htmlFor="framework-trigger">Framework</Label>
        <Popover open={comboOpen} onOpenChange={setComboOpen}>
          <PopoverTrigger>
            <button
              ref={comboTriggerRef}
              id="framework-trigger"
              type="button"
              className={cn(TRIGGER_CLASS, !selectedLabel && "text-muted-foreground")}
            >
              {selectedLabel ?? "Select framework…"}
              <ChevronsUpDown aria-hidden="true" className="size-4 shrink-0 opacity-60" />
            </button>
          </PopoverTrigger>
          <PopoverContent aria-label="Search frameworks" className="w-64 p-0">
            <Command filter={prefixOnly ? prefixFilter : undefined}>
              <CommandInput placeholder="Search framework…" aria-label="Search framework" />
              <CommandList aria-label="Frameworks">
                <CommandEmpty>No framework found.</CommandEmpty>
                <CommandGroup>
                  {FRAMEWORKS.map((f) => (
                    <CommandItem
                      key={f.value}
                      value={f.label}
                      onSelect={() => {
                        setFramework(f.value === framework ? "" : f.value);
                        setComboOpen(false);
                        comboTriggerRef.current?.focus();
                      }}
                    >
                      <Check
                        aria-hidden="true"
                        className={cn(
                          "size-4",
                          f.value === framework ? "opacity-100" : "opacity-0",
                        )}
                      />
                      {f.label}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
        <label className="flex w-fit items-center gap-2 text-sm leading-normal text-muted-foreground">
          <Checkbox
            checked={prefixOnly}
            onChange={(event) => setPrefixOnly(event.target.checked)}
          />
          Prefix match only
        </label>
        <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
          {selectedLabel ? `Committed: ${selectedLabel}` : "Nothing committed yet."}
        </p>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Command palette — Command + Dialog (⌘K / Ctrl+K)
        </h3>
        <Button variant="outline" onClick={() => setPaletteOpen(true)}>
          Open command palette
        </Button>
        <CommandDialog
          open={paletteOpen}
          onOpenChange={setPaletteOpen}
          title="Command palette"
        >
          <CommandInput
            placeholder="Type a command or search…"
            aria-label="Command palette"
          />
          <CommandList aria-label="Commands">
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem
                value="New file"
                keywords={["create", "add", "document"]}
                onSelect={runCommand}
              >
                <FilePlus />
                New file
              </CommandItem>
              <CommandItem
                value="Calculator"
                keywords={["math", "compute"]}
                onSelect={runCommand}
              >
                <Calculator />
                Calculator
              </CommandItem>
              <CommandItem
                value="Emoji picker"
                keywords={["smiley", "react"]}
                onSelect={runCommand}
              >
                <Smile />
                Emoji picker
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem value="Profile" onSelect={runCommand}>
                <User />
                Profile
              </CommandItem>
              <CommandItem value="Preferences" onSelect={runCommand}>
                <Settings />
                Preferences
              </CommandItem>
              <CommandItem value="Billing" disabled onSelect={runCommand}>
                <CreditCard />
                Billing — unavailable on this plan
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </CommandDialog>
        <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
          {lastAction ? `Ran: ${lastAction}` : "No command run yet."}
        </p>
      </section>
    </div>
  );
}