combo-box.tsx

import { useState } from "react";
import { Check, ChevronDown, X } from "lucide-react";

import { cn } from "@cooper/ui";
import { Button } from "@cooper/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@cooper/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@cooper/ui/popover";

export interface ComboBoxOption<T> {
  value: T;
  label: string;
}

interface ComboBoxProps {
  defaultLabel: string;
  searchPlaceholder: string;
  searchEmpty: string;
  valuesAndLabels: ComboBoxOption<string>[];
  currLabel: string;
  onSelect: (option: string) => void;
  triggerClassName?: string;
  onChange?: (value: string) => void;
  variant?: "default" | "form" | "filtering";
  newForm?: boolean;
  onClear?: () => void;
}

/**
 * A combo box, modified from https://ui.shadcn.com/docs/components/combobox
 *
 * @returns A combo box
 */
export default function ComboBox({
  defaultLabel,
  searchPlaceholder,
  searchEmpty,
  valuesAndLabels,
  currLabel,
  onSelect,
  triggerClassName,
  onChange,
  variant,
  newForm,
  onClear,
}: ComboBoxProps) {
  const [isOpen, setIsOpen] = useState(false);

  const styleVariant =
    variant === "form"
      ? "flex h-16 w-full rounded-lg border border-cooper-gray-150 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
      : variant === "filtering"
        ? "w-36 md:w-[21rem] h-10 lg:h-12 border-cooper-gray-400 text-lg placeholder:opacity-50 focus:ring-0 active:ring-0 rounded-lg border-[0.75px] py-0"
        : "h-8 py-0";

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger
        asChild
        className={cn(
          "overflow-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          triggerClassName,
        )}
      >
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={isOpen}
          className={cn(
            styleVariant,
            "h-12 min-h-0 justify-between overflow-hidden text-ellipsis text-nowrap py-0",
            variant === "form"
              ? "w-full"
              : variant === "filtering"
                ? ""
                : "w-[400px]",
            newForm
              ? "h-10 w-full"
              : variant === "form"
                ? "h-10 w-full"
                : "h-12",
          )}
        >
          <span
            className={`overflow-hidden whitespace-nowrap ${defaultLabel === "Location" ? "text-cooper-gray-350" : "text-cooper-gray-350 font-normal"} ${newForm ? "text-sm" : "text-sm"}`}
          >
            {currLabel && currLabel !== defaultLabel ? currLabel : defaultLabel}
          </span>
          <div className="flex items-center gap-1.5">
            {onClear && (
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  onClear();
                }}
                className="pointer-events-auto flex items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
                aria-label="Clear selection"
              >
                <X className="h-4 w-4" />
              </button>
            )}
            <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
          </div>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[400px] p-0">
        <Command>
          <CommandInput
            placeholder={searchPlaceholder}
            onChangeCapture={(e) =>
              onChange && onChange((e.target as HTMLInputElement).value)
            }
          />
          <CommandEmpty>{searchEmpty}</CommandEmpty>
          <CommandGroup>
            <CommandList>
              {valuesAndLabels.map((option: ComboBoxOption<string>) => (
                <CommandItem
                  key={option.value}
                  value={option.label}
                  onSelect={(option) => {
                    onSelect(option);
                    setIsOpen(false);
                  }}
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      currLabel === option.label ? "opacity-100" : "opacity-0",
                    )}
                  />
                  {option.label}
                </CommandItem>
              ))}
            </CommandList>
          </CommandGroup>
        </Command>
      </PopoverContent>
    </Popover>
  );
}