import React from 'react'
import { render } from 'react-dom'
import { useSelect } from 'downshift'

const items = ['Apples', 'Bananas', 'Oranges']

const Select = ({ items, selectedItem }) => {
  const {
    getItemProps,
    getLabelProps,
    getMenuProps,
    getToggleButtonProps,
    isOpen,
  } = useSelect({ items, selectedItem })

  return (
    <div>
      <label {...getLabelProps()}>Fruit: </label>
      <button {...getToggleButtonProps()}>{selectedItem}</button>
      {/* <ul {...getMenuProps(isOpen ? undefined : { "aria-activedescendant": null })}> */}
      <ul {...getMenuProps()}>
        {isOpen &&
          items.map((item, index) => (
            <li key={item} {...getItemProps({ item, index })}>
              {item}
            </li>
          ))}
      </ul>
    </div>
  )
}

const App = () => <Select items={items} selectedItem={items[0]} />

render(<App />, document.getElementById('root'))