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
Навигационные панели предназначены для предоставления ссылок на различные части вашего приложения
Боковые панели содержат дополнительную информацию и закрепляются по левую или правую сторону окна браузера
```jsx
import { Drawer } from '@startupjs/ui'
```

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

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

## Простой пример
```jsx example
const [visible, setVisible] = useState(false)

return (
  <View>
    <Drawer
      visible={visible}
      style={{ width: 250 }}
      onDismiss={()=> setVisible(false)}
    >
      <View style={{ padding: 16 }}>
        <Text>Контент</Text>
      </View>
    </Drawer>
    <Button
      style={{ width: 160 }}
      onPress={()=> setVisible(true)}
    >Развернуть</Button>
  </View>
)
```

## Позиция
Компонент можно разворачивать из разных направлений (left, right, top, buttom)
```jsx example
const [visible, setVisible] = useState('')

const data = {
  left: {
    name: 'Слева',
    style: { width: 240 }
  },
  right: {
    name: 'Справа',
    style: { width: 240 }
  },
  top: {
    name: 'Сверху',
    style: { height: 240 }
  },
  bottom: {
    name: 'Снизу',
    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>
)
```

## Свайп
В компоненте есть поддержка закрытия с помощью свайпа
```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')}
    >Отображение зоны свайпа</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')}
    >Кастомная зона свайпа</Button>
  </Row>
)
```

## Хук для плавного закрытия
Если в контенте компонента есть события при которых должна быть скрыта панель, например переход на другую страницу, и нужно чтобы она закрывалась плавно с анимацией
Есть хук - useDrawerDismiss, в котором задается дефолная функция, которая отрабатывает на каждое событие onDismiss, и дополнительные которые должны вызываться после нее
```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>Открыть другую страницу</Text>
        </View>
      </TouchableWithoutFeedback>
    </Drawer>
    <Button
      onPress={() => setLeftVisible(true)}
      style={{ width: 280, marginRight: 24, marginTop: 16 }}
    >Без хука</Button>
    <Drawer
      visible={leftDrawer}
      onDismiss={onDismiss}
      style={{ width: 240 }}
    >
      <TouchableWithoutFeedback onPress={()=> setOnDismiss('rightDrawer')}>
        <View>
          <Text>Открыть правый Drawer</Text>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={()=> setOnDismiss('goToPage', '/docs/components/Button')}>
        <View>
          <Text>Открыть другую страницу</Text>
         </View>
      </TouchableWithoutFeedback>
    </Drawer>
    <Button
      onPress={()=> setLeftDrawer(true)}
      style={{ width: 280, marginRight: 24, marginTop: 16 }}
    >С хуком</Button>
  </Row>
)
```