'use client';

import * as React from 'react';
import { CheckIcon, ChevronsUpDownIcon } from '@/icons';

import { cn } from '@/lib/utils';
import { useControllableState } from '@/hooks/use-controllable-state';
import { Button } from '@/components/button/button';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/command/command';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/popover/popover';

export interface ComboboxOption {
  label: string;
  value: string;
  disabled?: boolean;
}

export interface ComboboxProps {
  options: ComboboxOption[];
  /** Controlled selection. Pass with `onValueChange`. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Shown on the trigger when nothing is selected. */
  placeholder?: string;
  searchPlaceholder?: string;
  emptyMessage?: string;
  disabled?: boolean;
  /** Width of the trigger. The popover matches it. */
  className?: string;
  /** Extra classes for the popover surface. */
  contentClassName?: string;
  /** Put it on the trigger, so a `<Label htmlFor>` can point at it. */
  id?: string;
  'aria-label'?: string;
  'aria-labelledby'?: string;
}

/**
 * Select-with-search, composed from Command + Popover.
 *
 * Use it once a Select's list is long enough that scanning becomes tedious —
 * roughly a dozen options. Selecting the option that is already selected
 * clears it, which is the behaviour people expect from this control.
 *
 * ```tsx
 * <Combobox
 *   options={frameworks}
 *   value={value}
 *   onValueChange={setValue}
 *   placeholder="Select framework…"
 * />
 * ```
 *
 * With a visible label, point `aria-labelledby` at it rather than relying on
 * `htmlFor`: the placeholder fallback below would otherwise take precedence
 * over the `<label>` and announce the wrong name.
 *
 * ```tsx
 * <Label id="framework-label">Framework</Label>
 * <Combobox aria-labelledby="framework-label" options={frameworks} />
 * ```
 */
function Combobox({
  options,
  value: controlledValue,
  defaultValue = '',
  onValueChange,
  placeholder = 'Select an option…',
  searchPlaceholder = 'Search…',
  emptyMessage = 'No results found.',
  disabled = false,
  className,
  contentClassName,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
  ...props
}: ComboboxProps) {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = useControllableState({
    value: controlledValue,
    defaultValue,
    onChange: onValueChange,
  });

  const selected = options.find((option) => option.value === value);

  /* The `combobox` role does not take its name from its content, so the label
     on the trigger is not enough on its own — without one of these three the
     control is announced as an unnamed combobox. The placeholder is the last
     resort: it is the only wording we are guaranteed to have. */
  const triggerLabel = ariaLabel ?? (ariaLabelledBy ? undefined : placeholder);

  const commit = (next: string) => {
    setValue(next);
    setOpen(false);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          aria-label={triggerLabel}
          aria-labelledby={ariaLabelledBy}
          disabled={disabled}
          data-slot="combobox-trigger"
          className={cn('w-[220px] justify-between font-normal', className)}
          {...props}
        >
          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
            {selected ? selected.label : placeholder}
          </span>
          <ChevronsUpDownIcon className="shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        data-slot="combobox-content"
        className={cn('w-(--radix-popover-trigger-width) p-0', contentClassName)}
        align="start"
      >
        <Command>
          <CommandInput placeholder={searchPlaceholder} />
          <CommandList>
            <CommandEmpty>{emptyMessage}</CommandEmpty>
            <CommandGroup>
              {options.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.label}
                  disabled={option.disabled}
                  onSelect={() => commit(option.value === value ? '' : option.value)}
                >
                  <CheckIcon
                    className={cn(
                      'mr-2 size-4',
                      option.value === value ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                  {option.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export { Combobox };