import { useState } from 'react'
import { View, Text, Dimensions } from 'react-native'
import Dropdown from '../'
import Icon from '../../../Icon'
import Row from '../../../Row'
import Br from '../../../Br'
import {
  faSort,
  faEllipsisV,
  faPencilAlt,
  faTrashAlt
} from '@fortawesome/free-solid-svg-icons'

# Dropdown
Всплывающие меню. Адаптируемое в зависимости от расширения.
```jsx
import { Dropdown } from '@startupjs/ui'
```

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

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

## Простой пример
В функцию onChange приходит значение нажатого чилдрена.
```jsx example
const [sort, setSort] = useState('')

return (
  <Dropdown
    value={sort}
    onChange={v => setSort(v)}
  >
    <Dropdown.Caption placeholder="Sort by" />
    <Dropdown.Item value="popular" label="Popular" />
    <Dropdown.Item value="brand" label="Brand" />
    <Dropdown.Item value="name" label="Name" />
  </Dropdown>
)
```

## Разные варианты заголовков
### По умолчанию
```jsx example
const [sort, setSort] = useState('')

return (
  <Dropdown
    value={sort}
    onChange={v => setSort(v)}
  >
    <Dropdown.Caption placeholder="Sort by" />
    <Dropdown.Item value="popular" label="Popular" />
    <Dropdown.Item value="brand" label="Brand" />
    <Dropdown.Item value="name" label="Name" />
  </Dropdown>
)
```

### В виде кнопки
```jsx example
const [sort, setSort] = useState('')

return (
  <Dropdown
    value={sort}
    onChange={v => setSort(v)}
  >
    <Dropdown.Caption variant="button" placeholder="Menu" />
    <Dropdown.Item value="popular" label="Popular" />
    <Dropdown.Item value="brand" label="Brand" />
    <Dropdown.Item value="name" label="Name" />
  </Dropdown>
)
```

### Кастомный
```jsx example
const [sort, setSort] = useState('')

const captionStyle = { width: 30, height: 30, backgroundColor: 'white',
  borderRadius: 50, justifyContent: 'center', alignItems: 'center' }

return (
  <Dropdown
    value={sort}
    onChange={v => setSort(v)}
  >
    <Dropdown.Caption>
      <View style={captionStyle}>
        <Icon icon={faEllipsisV} />
      </View>
    </Dropdown.Caption>
    <Dropdown.Item value="popular" label="Popular" />
    <Dropdown.Item value="brand" label="Brand" />
    <Dropdown.Item value="name" label="Name" />
  </Dropdown>
)
```

## Иконки в пунктах списка
```jsx example
const [sort, setSort] = useState('')

return (
  <Dropdown
    value={sort}
    onChange={v => setSort(v)}
  >
    <Dropdown.Item icon={faPencilAlt} value="edit" label="Edit" />
    <Dropdown.Item icon={faTrashAlt} value="delete" label="Delete" />
  </Dropdown>
)
```

## Стилизация
```jsx example
const [value, setValue] = useState('')

return (
  <Dropdown
    style={
      Dimensions.get('window').width < 780
        ? { maxHeight: 160 }
        : { maxHeight: 100 }
    }
    value={value}
    onChange={v => setValue(v)}
  >
    <Dropdown.Item value="java" label="Java" />
    <Dropdown.Item value="golang" label="Golang" />
    <Dropdown.Item value="js" label="JavaScript" />
    <Dropdown.Item value="python" label="Python" />
    <Dropdown.Item value="csharp" label="C#" />
    <Dropdown.Item value="cpp" label="C++" />
  </Dropdown>
)
```

Есть 2 типа поведения Dropdown, для десктопного и мобильного разрешения
На десктопе используется компонент [Popover](/docs/popups/Popover)
На мобильных экранах - [Drawer](/docs/popups/Drawer)
Чтобы правильно применять style для каждого варианта, можно использовать миксин `+tablet`:
```styl
.wrapper
  // Drawer styles
  +tablet()
    // Popover styles
```

## Примеры поведения Dropdown.Item
1 - Стандартое поведение - когда есть `label` и `value`. При выборе значения `value` передается в каллбэк `onChange`
2 - Для кастомного нажатия нужно передать калбэк `onPress` в **Dropdown.Item**
3 - Чтобы **Dropdown.Item** как ссылка для перехода на нужную страницу, можно использовать проп `to`
4 - Если нужны кастомные стили, для изменения активного значения можно использовать калбэк `onPress`, либо проп `value`, который будет передаваться в `onChange`, так же как и в стандартном варианте

```jsx example
const [state, setState] = useState('')

const customStyle = state === 'custom'
  ? { backgroundColor: 'blue', padding: 8 }
  : { backgroundColor: 'yellow', padding: 8 }

const customStyle2 = state === 'custom2'
  ? { backgroundColor: 'blue', padding: 8 }
  : { backgroundColor: 'yellow', padding: 8 }

return (
  <Dropdown
    value={state}
    onChange={v=> setState(v)}
  >
    <Dropdown.Item label='Выбрать 1' value={1} />
    <Dropdown.Item label='Показать 2' onPress={()=> alert('2')} />
    <Dropdown.Item
      to='/'
      label='На главную'
      onPress={()=> alert('На главную')}
    />
    <Dropdown.Item value='custom'>
      <View style={customStyle}>
        <Text>Кастомный 1</Text>
      </View>
    </Dropdown.Item>
    <Dropdown.Item onPress={()=> setState('custom2')}>
      <View style={customStyle2}>
        <Text>Кастомный 2</Text>
      </View>
    </Dropdown.Item>
  </Dropdown>
)
```

## Позиция для Popover
- position: имеет 4 варианта положений (left, right, top, bottom)
- attachment: дополнительный параметр для смещения (start, center, end)

Массив placements - задает какие позиции можно использовать при автофиксе

## Так же
- drawerCancelLabel: задать имя кнопки отмены на iOS и Android
<Br lines={10} />