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
Pop-up menus. Adaptable depending on the extension.
```jsx
import { Dropdown } from '@startupjs/ui'
```

## Initialization

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

## Simple example
Into function onChange comes value of the pressed child.
```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>
)
```

## Different header options
### Default
```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>
)
```

### In the form of a button
```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>
)
```

### Custom
```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>
)
```

## Icons in items
```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>
)
```

## Stylization
```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>
)
```

There are 2 types of behavior Dropdown, for desktop and mobile resolution
[Popover](/docs/popups/Popover) component is used on the desktop
[Drawer](/docs/popups/Drawer) is used on mobile screens
To apply styles correctly for each variation, need use mixin `+tablet`:
```styl
.wrapper
  // Drawer styles
  +tablet()
    // Popover styles
```

## Examples of behavior Dropdown.Item
1 - The standard behavior is when there is a `label` and a` value`. When choosing a value, `value` is passed to the` onChange` callback
2 - For a custom click, you need to pass the `onPress` callback to ** Dropdown.Item **
3 - To make ** Dropdown.Item ** as a link to go to the desired page, you can use the `to` prop
4 - If you need custom styles, to change the active value, you can use `onPress` callback, or `value` prop, which will be passed to` onChange`, the same as in the standard version

```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='Choose 1' value={1} />
    <Dropdown.Item label='Show 2' onPress={()=> alert('2')} />
    <Dropdown.Item
      to='/'
      label='To home'
      onPress={()=> alert('To home')}
    />
    <Dropdown.Item value='custom'>
      <View style={customStyle}>
        <Text>Custom 1</Text>
      </View>
    </Dropdown.Item>
    <Dropdown.Item onPress={()=> setState('custom2')}>
      <View style={customStyle2}>
        <Text>Custom 2</Text>
      </View>
    </Dropdown.Item>
  </Dropdown>
)
```

## Position for Popover
- position: has 4 position variations (top, bottom, left, right)
- attachment: an additional parameter for the offset (start, center, end)

Array placements - specifies which positions can be used for autofix

## Also
- drawerCancelLabel: specify the name of the cancel button iOS and Android
<Br lines={10} />