import type { components } from "../api/schema";
import { labelText } from "../lib/labels";
import {
  ComboboxRoot,
  ComboboxInputGroup,
  ComboboxInput,
  ComboboxClear,
  ComboboxTrigger,
  ComboboxPopup,
  ComboboxList,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxEmpty,
} from "@/components/ui/combobox";

type LabelView = components["schemas"]["LabelView"];

export type Option = { id: string; labels: LabelView[] };

export function OptionsCombobox({
  id,
  value,
  onChange,
  options,
  lang,
  placeholder,
}: {
  id: string;
  value: string;
  onChange: (v: string) => void;
  options: Option[];
  lang: string;
  placeholder: string;
}) {
  const selected = options.find((o) => o.id === value) ?? null;

  return (
    <ComboboxRoot<Option | null>
      items={options}
      value={selected}
      onValueChange={(option) => onChange(option?.id ?? "")}
      itemToStringLabel={(option) => (option ? labelText(option.labels, lang) : "")}
      isItemEqualToValue={(a, b) => a?.id === b?.id}
    >
      <ComboboxInputGroup>
        <ComboboxInput id={id} placeholder={placeholder} />
        <ComboboxClear aria-label="Clear" />
        <ComboboxTrigger aria-label="Open" />
      </ComboboxInputGroup>

      <ComboboxPopup>
        <ComboboxEmpty>No matches.</ComboboxEmpty>
        <ComboboxList>
          {(option: Option) => (
            <ComboboxItem key={option.id} value={option}>
              <ComboboxItemIndicator className="text-primary">✓</ComboboxItemIndicator>
              {labelText(option.labels, lang)}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxPopup>
    </ComboboxRoot>
  );
}