import { useAutoComplete } from "@wispe/wispe-react";

export interface User {
  id: number;
  name: string;
}

export const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Smith" },
  { id: 3, name: "Bob Johnson" },
  { id: 4, name: "Alice Brown" },
  { id: 5, name: "Charlie Wilson" },
];

export function BasicAutocomplete() {
  const {
    getRootProps,
    getLabelProps,
    getInputProps,
    getListProps,
    getItemProps,
    getItemState,
    getItems,
    isOpen,
  } = useAutoComplete({
    items: users,
    onFilterAsync: async ({ searchTerm }) =>
      users.filter((u) =>
        u.name.toLowerCase().includes(searchTerm.toLowerCase())
      ),
    itemToString: (u) => u.name,
  });

  return (
    <>
      <label {...getLabelProps()}>Search users</label>
      <div {...getRootProps()}>
        <input {...getInputProps()} />

        {isOpen && (
          <ul {...getListProps()}>
            {getItems().map((user) => (
              <li key={user.id} {...getItemProps(user)}>
                <span>
                  {user.name} {getItemState(user).isSelected && <span>✓</span>}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
}