import React from 'react'

import useDownshift from 'use-downshift'

const items = [
  {value: 'apple'},
  {value: 'pear'},
  {value: 'orange'},
  {value: 'grape'},
  {value: 'banana'},
]

function MyComponent() {
  const {
    isOpen,
    getRootProps,
    getMenuProps,
    getItemProps,
    getLabelProps,
    getInputProps,
    highlightedIndex,
    inputValue,
    selectedItem
  } = useDownshift({
    onChange: selection => alert(`You selected ${selection.value}`),
    itemToString: item => (item ? item.value : '')
  })

  return (
    <div {...getRootProps()}>
      <label {...getLabelProps()}>{label}</label>
      <input {...getInputProps({ placeholder: 'search...' })} />
      {isOpen && (
        <ul {...getMenuProps()}>
          {items
            .filter(item => !inputValue || item.value.includes(inputValue))
            .map((item, index) => (
              <li
                {...getItemProps({
                  key: index,
                  item,
                  style: {
                    background: highlightedIndex === index ? 'lightgray' : 'white',
                    fontWeight: selectedItem === item ? 'bold' : 'normal',
                  }
                })}
              >
                {item.value}
              </li>
            ))}
        </ul>
      )}
    </div>
  )
}

export default MyComponent