import { useState } from 'react'
import AutoSuggest from '../AutoSuggest'
import MenuItem from '../Menu/MenuItem'
import Br from '../Br'
import Row from '../Row'
import Span from '../typography/Span'
import Avatar from '../Avatar'

# AutoSuggest
A text field with a pop-up list of options.

```jsx
import { AutoSuggest } from '@startupjs/ui'
```

## Initialization

Before use you need to configure [Portal](/docs/components/Portal)

## Simple example
```jsx example
const [value, setValue] = useState()

const options = [
  { value: '1', label: 'Harry' },
  { value: '2', label: 'Alfie' },
  { value: '3', label: 'Jacob' },
]

return (
  <AutoSuggest
    options={options}
    value={value}
    onChange={v => setValue(v)}
  />
)
```

## Props
- options: array of objects for options, each option has a value and a label
- value: active value
- maxHeight: maximum height of the popup list
- placeholder: the title of the field
- onChange: callback function, called after selecting a value, takes the selected value as the first parameter

```jsx example
const [value, setValue] = useState()

const options = [
  { value: '1', label: 'Harry' },
  { value: '2', label: 'Alfie' },
  { value: '3', label: 'Jacob' },
  { value: '4', label: 'Oscar' },
  { value: '5', label: 'Charlie' },
  { value: '6', label: 'James' },
  { value: '7', label: 'William' }
]

return (
  <AutoSuggest
    options={options}
    value={value}
    style={{ maxHeight: 160 }}
    placeholder="Select value"
    onChange={v=> setValue(v)}
  />
)
```

## Customization
- renderItem: a function that is called when rendering each element of the array. Gets 2 arguments - the current element (item) and its index.

```jsx example
const [value, setValue] = useState()

const options = [
  { value: '1', label: 'Harry' },
  { value: '2', label: 'Alfie' },
  { value: '3', label: 'Jacob' },
  { value: '4', label: 'Oscar' },
  { value: '5', label: 'Charlie' },
  { value: '6', label: 'James' },
  { value: '7', label: 'William' }
]

const renderItem = (item, index, selectIndexValue)=> {
  const style = { padding: 8 }

  if (selectIndexValue === index) {
    style.backgroundColor = "#eee"
  }

  return (
    <Row
      key={index}
      vAlign='center'
      style={style}
    >
      <Avatar size='s'>{item.label}</Avatar>
      <Span style={{ marginLeft: 8 }}>{item.label}</Span>
    </Row>
  )
}

return (
  <AutoSuggest
    options={options}
    value={value}
    style={{ maxHeight: 160 }}
    placeholder="Select value"
    renderItem={renderItem}
    onChange={v=> setValue(v)}
  />
)
```

## Also
- style: responsible for styled hidden content
- captionStyle: responsible for heading styles (input)
- onDismiss: callback, called when the list is closed
- onChangeText: callback, called when entering text, accepts 1 argument text
- onScrollEnd: callback, called at the end of the scroll