"use client";
import * as React from "react";
import { Command as C } from "cmdk";
import { motion } from "motion/react";
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";

const PillCtx = React.createContext("cmd");

export function Command({ className, ...p }: React.ComponentProps<typeof C>) {
  const id = React.useId();
  return (
    <PillCtx.Provider value={id}>
      <C className={cn("flex w-full flex-col overflow-hidden rounded-xl bg-surface p-2 text-on-surface shadow-clay", className)} {...p} />
    </PillCtx.Provider>
  );
}

export function CommandDialog({
  title = "Command palette",
  description = "Search for a command to run",
  children,
  ...p
}: React.ComponentProps<typeof Dialog> & { title?: string; description?: string }) {
  return (
    <Dialog {...p}>
      <DialogContent className="max-w-lg p-0 [&>button:last-child]:hidden">
        <DialogTitle className="sr-only">{title}</DialogTitle>
        <DialogDescription className="sr-only">{description}</DialogDescription>
        <Command className="shadow-none">{children}</Command>
      </DialogContent>
    </Dialog>
  );
}

export function CommandInput({ className, ...p }: React.ComponentProps<typeof C.Input>) {
  return (
    <div className="mb-2 flex items-center gap-2 rounded-full bg-surface-sunken px-4 shadow-well">
      <MagnifyingGlassIcon weight="bold" className="size-4 shrink-0 text-on-surface-muted" aria-hidden />
      <C.Input
        className={cn("h-11 w-full bg-transparent text-sm font-semibold outline-none placeholder:text-on-surface-muted disabled:opacity-50", className)}
        {...p}
      />
    </div>
  );
}

export function CommandList({ className, ...p }: React.ComponentProps<typeof C.List>) {
  return <C.List className={cn("max-h-72 scroll-py-1 overflow-y-auto overflow-x-hidden", className)} {...p} />;
}
export function CommandEmpty({ className, ...p }: React.ComponentProps<typeof C.Empty>) {
  return <C.Empty className={cn("py-6 text-center text-sm font-semibold text-on-surface-muted", className)} {...p} />;
}
export function CommandGroup({ className, ...p }: React.ComponentProps<typeof C.Group>) {
  return (
    <C.Group
      className={cn(
        "overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-bold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-on-surface-muted",
        className
      )}
      {...p}
    />
  );
}
export function CommandSeparator({ className, ...p }: React.ComponentProps<typeof C.Separator>) {
  return <C.Separator className={cn("mx-2 my-1 h-px bg-outline/60", className)} {...p} />;
}

/** Item. The selected one gets a pill that slides between items (watches cmdk's data-selected). */
export function CommandItem({ className, children, ...p }: React.ComponentProps<typeof C.Item>) {
  const id = React.useContext(PillCtx);
  const ref = React.useRef<HTMLDivElement>(null);
  const [selected, setSelected] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const sync = () => setSelected(el.getAttribute("data-selected") === "true");
    sync();
    const mo = new MutationObserver(sync);
    mo.observe(el, { attributes: true, attributeFilter: ["data-selected"] });
    return () => mo.disconnect();
  }, []);
  return (
    <C.Item
      ref={ref}
      className={cn(
        "relative flex cursor-pointer select-none items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
        className
      )}
      {...p}
    >
      {selected && (
        <motion.span
          layoutId={`${id}-pill`}
          className="absolute inset-0 rounded-full bg-surface-sunken shadow-well"
          transition={springs.snappy}
          aria-hidden
        />
      )}
      <span className="relative flex w-full items-center gap-2">{children}</span>
    </C.Item>
  );
}

export function CommandShortcut({ className, ...p }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto font-mono text-xs tracking-widest text-on-surface-muted", className)} {...p} />;
}
Installation
