import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from '@wandercom/design-system-web/ui/combobox';

const options = ['Option 1', 'Option 2', 'Option 3'];

export function Example() {
  return (
    <Combobox items={options}>
      <ComboboxInput placeholder="Search..." />
      <ComboboxContent>
        <ComboboxEmpty>No results found.</ComboboxEmpty>
        <ComboboxList>
          {(item) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

const destinations = ['Aspen', 'Big Bear', 'Joshua Tree', 'Lake Tahoe', 'Malibu'];

<Combobox items={destinations}>
  <ComboboxInput placeholder="Search destinations..." />
  <ComboboxContent>
    <ComboboxEmpty>No destinations found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

<Combobox items={destinations}>
  <ComboboxInput placeholder="With clear button" showClear />
  <ComboboxContent>
    <ComboboxEmpty>No destinations found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

<Combobox disabled items={destinations}>
  <ComboboxInput placeholder="Disabled combobox" />
  <ComboboxContent>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

const destinations = [
  { value: 'aspen-co', label: 'Aspen, Colorado' },
  { value: 'big-bear-ca', label: 'Big Bear, California' },
  { value: 'joshua-tree-ca', label: 'Joshua Tree, California' },
];

<Combobox items={destinations}>
  <ComboboxInput placeholder="Search destinations..." />
  <ComboboxContent>
    <ComboboxEmpty>No destinations found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

const [value, setValue] = useState<Destination | null>(null);
const [inputValue, setInputValue] = useState('');

<Combobox
  inputValue={inputValue}
  items={destinations}
  value={value}
  onInputValueChange={setInputValue}
  onValueChange={setValue}
>
  <ComboboxInput placeholder="Search destinations..." />
  <ComboboxContent>
    <ComboboxEmpty>No destinations found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

const countries = ['Argentina', 'Australia', 'Austria' /* ... 30+ items */];

<Combobox items={countries}>
  <ComboboxInput placeholder="Search countries..." />
  <ComboboxContent>
    <ComboboxEmpty>No countries found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

<Combobox items={countries}>
  <ComboboxInput placeholder="Search countries..." />
  <ComboboxContent scrollable={false}>
    <ComboboxEmpty>No countries found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

const properties = [
  'Aspen Chalet',
  'Big Bear Lakefront Lodge with Private Dock and Mountain Views',
  /* ... */
];

// Default: rows grow and long labels wrap
<Combobox items={properties}>
  <ComboboxInput placeholder="Search properties..." />
  <ComboboxContent>
    <ComboboxEmpty>No properties found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

// truncate: rows stay single-line and ellipsize
<Combobox items={properties}>
  <ComboboxInput placeholder="Search properties..." />
  <ComboboxContent>
    <ComboboxEmpty>No properties found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} truncate value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

const regionGroups = [
  { value: 'Mountains', items: ['Aspen', 'Big Bear', 'Telluride'] },
  { value: 'Desert', items: ['Joshua Tree', 'Palm Springs', 'Sedona'] },
  { value: 'Coast', items: ['Malibu', 'Carmel', 'Cannon Beach'] },
];

<Combobox items={regionGroups}>
  <ComboboxInput placeholder="Search destinations..." />
  <ComboboxContent>
    <ComboboxEmpty>No destinations found.</ComboboxEmpty>
    <ComboboxList>
      {(group) => (
        <ComboboxGroup items={group.items} key={group.value}>
          <ComboboxLabel>{group.value}</ComboboxLabel>
          <ComboboxCollection>
            {(item) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxCollection>
        </ComboboxGroup>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>