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
Текстовое поле, со всплывающим списком опций.
Используется если в всплывающим списке слишком много опций, а с помощью ввода текста можно искать нужное.

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

## Инициализация

Перед использованием нужно настроить [Portal](/docs/components/Portal)

## Простой пример
```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)}
  />
)
```

## Свойства
- options: массив объектов для опций, каждая опция имеет значение (value) и метку (label)
- value: активное значение
- maxHeight: максимальная высота всплывающего списка
- placeholder: заголовок поля
- onChange: калбэк функция, вызывается после выбора значения, принимает выбранное значение первым параметром

```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)}
  />
)
```

## Кастомизация
- renderItem: функция которая вызывается при рендеренге каждого элемента массива. Получает 2 аргумента - текущий элемент (item) и его индекс.

```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)}
  />
)
```

## Также
- style: отвечает за стили скрытого контента
- captionStyle: отвечает за стили заголовка (input)
- onDismiss: калбэк, вызывается при закрытии списка
- onChangeText: калбэк, вызывается при вводе текста, принимает 1 аргумент text
- onScrollEnd: калбэк, вызывается в конце сколла, удобно использовать для подгрузки

<Br lines={16} />