Assignee picker

"use client";

import * as React from "react";
import { ChevronDownIcon, UserRoundIcon } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

export type Person = {
  id: string;
  name: string;
  email?: string;
  image?: string;
};

type AssigneePickerProps = Omit<
  React.ComponentProps<typeof Button>,
  "value" | "defaultValue" | "size" | "variant" | "children"
> & {
  /** Everyone who can be picked. */
  people: Person[];
  /** The chosen person's id, or null for unassigned. */
  value?: string | null;
  /** First value when uncontrolled. */
  defaultValue?: string | null;
  /** Called with the new id, or null when Unassigned is chosen. */
  onValueChange?: (value: string | null) => void;
  /** Trigger and list text for no one. */
  placeholder?: string;
  /** Trigger height: 28px or 32px. */
  size?: "sm" | "default";
  /** Look of the trigger. */
  variant?: "outline" | "ghost";
};

function initials(name: string) {
  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? "")
    .join("");
}

function PersonAvatar({ person }: { person: Person }) {
  return (
    <Avatar className="size-5">
      {person.image ? <AvatarImage src={person.image} alt="" /> : null}
      <AvatarFallback className="text-xs leading-none font-medium text-foreground/70">
        {initials(person.name)}
      </AvatarFallback>
    </Avatar>
  );
}

/**
 * A combobox for picking a person. Popover and Command underneath.
 * The trigger shows the avatar and name; the list filters as you type and starts with Unassigned.
 */
export function AssigneePicker({
  people,
  value,
  defaultValue = null,
  onValueChange,
  placeholder = "Unassigned",
  size = "default",
  variant = "outline",
  className,
  ...props
}: AssigneePickerProps) {
  const [open, setOpen] = React.useState(false);
  const [internal, setInternal] = React.useState<string | null>(defaultValue);
  const current = value === undefined ? internal : value;
  const selected = current ? people.find((p) => p.id === current) : undefined;

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

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant={variant}
          size={size}
          data-slot="assignee-picker"
          data-empty={selected ? undefined : ""}
          className={cn("max-w-full justify-start pl-1.5", size === "sm" ? "pr-1.5" : "pr-2", className)}
          {...props}
        >
          {selected ? (
            <PersonAvatar person={selected} />
          ) : (
            <span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-dashed border-input text-muted-foreground">
              <UserRoundIcon className="size-3" aria-hidden="true" />
            </span>
          )}
          <span className={cn("truncate", !selected && "text-muted-foreground")}>
            {selected ? selected.name : placeholder}
          </span>
          <ChevronDownIcon className="ml-auto text-muted-foreground" aria-hidden="true" />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-60 gap-0 rounded-md border p-0 shadow-md ring-0">
        <Command className="rounded-md!">
          <CommandInput placeholder="Search people" />
          <CommandList>
            <CommandEmpty className="text-muted-foreground">No one found.</CommandEmpty>
            <CommandGroup>
              <CommandItem value="__unassigned" data-checked={!selected} onSelect={() => choose(null)} className="h-8">
                <span className="flex size-5 shrink-0 items-center justify-center rounded-full border border-dashed border-input text-muted-foreground">
                  <UserRoundIcon className="size-3" aria-hidden="true" />
                </span>
                <span className="truncate">{placeholder}</span>
              </CommandItem>
              {people.map((person) => (
                <CommandItem
                  key={person.id}
                  value={`${person.name} ${person.email ?? ""}`}
                  data-checked={selected?.id === person.id}
                  onSelect={() => choose(person.id)}
                  className="h-8"
                >
                  <PersonAvatar person={person} />
                  <span className="truncate">{person.name}</span>
                  {person.email ? (
                    <span className="truncate text-xs text-muted-foreground group-data-selected/command-item:text-foreground/70">
                      {person.email}
                    </span>
                  ) : null}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}