import { useState } from 'react'
import { useDrawerDismiss } from '@startupjs/ui/hooks'
import { View, TouchableWithoutFeedback, Text } from 'react-native'
import { useHistory } from 'react-router-native'
import Row from '../../Row'
import Button from '../../Button'
import Drawer from './index.js'

# Drawer
Navigation bars are designed to provide links to different parts of your application
Sidebars provide additional information and dock to the left or right side of the browser window
```jsx
import { Drawer } from '@startupjs/ui'
```

## Initialization

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

## Simple example
```jsx example
const [visible, setVisible] = useState(false)

return (
  <View>
    <Drawer
      visible={visible}
      style={{ width: 250 }}
      onDismiss={()=> setVisible(false)}
    >
      <View style={{ padding: 16 }}>
        <Text>Content</Text>
      </View>
    </Drawer>
    <Button
      style={{ width: 160 }}
      onPress={()=> setVisible(true)}
    >Show</Button>
  </View>
)
```

## Position
Сomponent can be deployed from different directions (left, right, top, buttom)
```jsx example
const [visible, setVisible] = useState('')

const data = {
  left: {
    name: 'Left',
    style: { width: 240 }
  },
  right: {
    name: 'Right',
    style: { width: 240 }
  },
  top: {
    name: 'Up',
    style: { height: 240 }
  },
  bottom: {
    name: 'Down',
    style: { height: 240 }
  }
}

return (
  <Row style={{ width: '100%', flexWrap: 'wrap' }}>
    {
      Object.keys(data).map((key, index) => (
        <View key={index}>
          <Drawer
            position={key}
            style={data[key].style}
            visible={visible === key}
            onDismiss={()=> setVisible('')}
          >
            <View style={{ padding: 16 }}>
              <Text>{data[key].name}</Text>
            </View>
          </Drawer>
          <Button
            onPress={()=> setVisible(key)}
            style={{ width: 120, marginRight: 16, marginTop: 16 }}
          >{data[key].name}</Button>
        </View>
      ))
    }
  </Row>
)
```

## Swipe
The component has support for closing using a swipe
```jsx example
const [visible, setVisible] = useState('')

return (
  <Row style={{ width: '100%', flexWrap: 'wrap' }}>
    <Drawer
      visible={visible === 'zone'}
      onDismiss={()=> setVisible('')}
      style={{ width: 250 }}
      swipeStyle={{ backgroundColor: '#eeeeee' }}
    />
    <Button
      style={{ width: 280, marginRight: 24, marginTop: 16 }}
      onPress={()=> setVisible('zone')}
    >Swipe zone</Button>
    <Drawer
      visible={visible === 'custom'}
      onDismiss={()=> setVisible('')}
      style={{ width: 250 }}
      swipeStyle={{ backgroundColor: '#eeeeee', width: '30%',
        height: 100, top: 30 }}
    />
    <Button
      style={{ width: 280, marginTop: 16 }}
      onPress={()=> setVisible('custom')}
    >Custom swipe zone</Button>
  </Row>
)
```

## Hook for smooth closing
If the component has events, before the execution of which the panel must be hidden, e.g. go to another page, and you need it to close smoothly with animation
There is a hook - `useDrawerDismiss`, into which the default function is passed, which works out for each event `onDismiss`, and additional ones that will be called after it
```jsx
import { useDrawerDismiss } from '@startupjs/ui/hooks'
```

```jsx example
const history = useHistory()
const [leftDrawer, setLeftDrawer] = useState(false)
const [rightDrawer, setRightDrawer] = useState(false)
const [leftVisible, setLeftVisible] = useState(false)

const [onDismiss, setOnDismiss] = useDrawerDismiss({
  rightDrawer: () => setRightDrawer(true),
  goToPage: path => history.push(path),
  default: () => setLeftDrawer(false)
})

return (
  <Row style={{ width: '100%', flexWrap: 'wrap' }}>
    <Drawer
      visible={rightDrawer}
      position='right'
      onDismiss={()=> setRightDrawer(false)}
      style={{ width: 240 }}
    />
    <Drawer
      visible={leftVisible}
      onDismiss={()=> setLeftVisible(false)}
      style={{ width: 240 }}
    >
      <TouchableWithoutFeedback onPress={()=> history.push('/docs/components/Button')}>
        <View>
          <Text>Open another page</Text>
        </View>
      </TouchableWithoutFeedback>
    </Drawer>
    <Button
      onPress={() => setLeftVisible(true)}
      style={{ width: 280, marginRight: 24, marginTop: 16 }}
    >No hook</Button>
    <Drawer
      visible={leftDrawer}
      onDismiss={onDismiss}
      style={{ width: 240 }}
    >
      <TouchableWithoutFeedback onPress={()=> setOnDismiss('rightDrawer')}>
        <View>
          <Text>Open right Drawer</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={()=> setOnDismiss('goToPage', '/docs/components/Button')}>
        <View>
          <Text>Open another page</Text>
         </View>
      </TouchableWithoutFeedback>
    </Drawer>
    <Button
      onPress={()=> setLeftDrawer(true)}
      style={{ width: 280, marginRight: 24, marginTop: 16 }}
    >With hook</Button>
  </Row>
)
```