Combobox

const people = [
  {
    first: 'Charlie',
    last: 'Brown',
    twitter: 'dancounsell',
  },
  {
    first: 'Charlotte',
    last: 'White',
    twitter: 'mtnmissy',
  },
  {
    first: 'Chloe',
    last: 'Jones',
    twitter: 'ladylexy',
  },
  {
    first: 'Cooper',
    last: 'King',
    twitter: 'steveodom',
  },
  {
    first: 'James',
    last: 'Miller',
    twitter: 'bensie',
  },
  {
    first: 'John',
    last: 'James',
    twitter: 'miller',
  },
  {
    first: 'Travis',
    last: 'Arnold',
    twitter: 'souporserious',
  },
]
function App() {
  const [value, setValue] = React.useState('')
  return (
    <Card width={60} padding={2}>
      <Combobox
        minWidth={40}
        onSelect={(selectedValue) =>
          alert(`You selected: ${selectedValue.first} ${selectedValue.last}`)
        }
      >
        <Combobox.Input
          autoFocus
          renderLeft={<Icon name="search" />}
          placeholder="Search by name, email, or phone number"
          value={value}
          onClear={value.length > 0 ? () => setValue('') : null}
          onChange={(event) => setValue(event.target.value)}
          marginBottom={1}
        />
        <Combobox.Items
          value={value}
          filter={{
            keys: [(person) => person.first + ' ' + person.last, 'twitter'],
          }}
          items={people}
          renderItem={(person, index) => (
            <Combobox.Item
              key={person.first + ' ' + person.last}
              value={person}
              index={index}
              distribution="space-between"
            >
              <Highlight
                query={value}
                text={person.first + ' ' + person.last}
              />
              <Highlight fontSize={5} query={value} text={person.twitter} />
            </Combobox.Item>
          )}
          renderEmpty={
            <Menu.Item>
              No results for
              <Text as="span" inline color="grey-7">
                "{value}"
              </Text>
            </Menu.Item>
          }
        />
      </Combobox>
    </Card>
  )
}
render(<App />)

function App() {
  const [data, setData] = React.useState([])
  const [value, setValue] = React.useState('')
  const [fetching, setFetching] = React.useState(false)
  function clearValue() {
    setValue('')
  }
  function handleSelect(character) {
    alert(`You chose ${character.name}`)
    clearValue()
  }
  function handleChange(event) {
    const value = event.target.value
    const urlSafeValue = value.replace(' ', '+')
    setValue(value)
    setFetching(true)
    fetch(`https://rickandmortyapi.com/api/character/?name=${urlSafeValue}`)
      .catch((e) => e)
      .then((response) => response.json())
      .then((data) => {
        setData(data.results || [])
        setFetching(false)
      })
  }
  return (
    <Combobox.Popover
      openOnFocus
      closeOnSelect
      maxWidth={60}
      placeholder="Search Rick and Morty characters"
      value={value}
      isLoading={fetching}
      onChange={handleChange}
      onClear={clearValue}
      onSelect={handleSelect}
    >
      {data.length > 0 ? (
        data.map((character, index) => (
          <Combobox.Item
            key={index}
            index={index}
            value={character}
            spacing={1}
          >
            <Avatar
              source={character.image}
              size="sm"
              backgroundColor="grey-2"
            />
            <Text>{character.name}</Text>
            <Badge title={character.species} size="xs" marginLeft="auto" />
          </Combobox.Item>
        ))
      ) : (
        <Menu.Item>
          {fetching
            ? 'Searching...'
            : value.length > 0
            ? 'No results found'
            : 'Start typing to search the Rick and Morty character API.'}
        </Menu.Item>
      )}
    </Combobox.Popover>
  )
}
render(<App />)