import { useState } from 'react'
import { pug, u } from 'startupjs'
import { Sandbox } from '@startupjs/docs'
import { styl } from 'startupjs'
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
import Div from '../Div'
import Span from '../typography/Span'
import Icon from '../Icon'
import Row from '../Row'
import './index.mdx.styl'

# Div (див)

Див - это обертка для группы компонент, которая может быть кликабельной при получении свойства `onPress`.

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

## Простой пример
```jsx example
return (
  <Div>
    <Span>Div</Span>
  </Div>
)
```

## Кликабельность

```jsx example
const divStyle = {
  width: 150,
  height: 100,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
const [counter, setCounter] = useState(0)
return (
  <Div
    style={divStyle}
    onLongPress={() => setCounter(counter + 10)}
    onPress={() => setCounter(counter + 1)}
  >
    <Span>Clicked {counter} times</Span>
  </Div>
)
```

## Управление макетом

Вы можете указать свойства для управления макетом:

- `row` - выравнивает дочерние элементы слева направо (значение по умолчанию: `false`)
- `reverse` - выравнивает дочерние элементы в обратном порядке в зависимости от направления (значение по умолчанию: `false`)
- `wrap` - управляет переносом дочерних элементов в несколько строк (значение по умолчанию: `false`)
- `align` - управляет выравниванием по горизонтали (возможные значения: `left`, `center`, `right`)
- `vAlign` - управляет вертикальным выравниванием (возможные значения: `top`, `center`, `bottom`)
- `gap` - определяет размер промежутка между элементами в [юнитах](https://startupjs-ui.dev.dmapper.co/docs/tutorial/TricksWithStyles#units) или значение `true` эквивалентное `2`

```jsx example
return (
  <Div
    style={{ height: u(10), backgroundColor: 'yellow' }}
    row
    align='center'
    vAlign='center'
  >
    <Div style={{ width: u(5), height: u(5), backgroundColor: 'red' }} />
    <Div style={{ width: u(5), height: u(5), backgroundColor: 'blue' }} pushed />
  </Div>
)
```

## Полная ширина (или высота)

Вы можете сказать диву занять всё доступное место в родительстком контейнере (в зависимости от его `flex-direction`). Для этого передайте свойство `full`.

Это свойство просто поставит элементу `flex: 1`.

```jsx example
return (
  <Row vAlign='center'>
    <Div full>
      <Span>Tesla Model S</Span>
    </Div>
    <Span description>1000 HP</Span>
  </Row>
)
```

## Отступы между несколькими Div

При отображении нескольких дивов в строчку ("flex-direction: row") расстояние между ними можно регулировать с помощью `pushed` свойства, чтобы указать отступ от предыдущего дива. Возможные значения `pushed` свойства можно найти в разделе `Sandbox` в нижней части страницы. `true` значение свойства эквивалентно `m` значению.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
return (
  <Row>
    <Div style={divStyle}>
      <Span>Div 1</Span>
    </Div>
    <Div pushed='s' style={divStyle}>
      <Span>Div 2</Span>
    </Div>
    <Div pushed style={divStyle}>
      <Span>Div 3</Span>
    </Div>
    <Div pushed='l' style={divStyle}>
      <Span>Div 4</Span>
    </Div>
  </Row>
)
```

## Различные кликабельные состояния

Существует два кликабельных варианта компонента, управляемых свойством `variant`.

`opacity` вариант - при нажатии, прозрачность компонента уменьшается.

`highlight` вариант - при нажатии, прозрачность фона компонента уменьшается.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: 'center',
  justifyContent: 'center',
  backgroundColor: '#00AED6'
}
return (
  <Row>
    <Div style={divStyle} onPress={() => {}}>
      <Span>Div opacity variant</Span>
    </Div>
    <Div style={divStyle} variant='highlight' pushed onPress={() => {}}>
      <Span>Div highlight variant</Span>
    </Div>
  </Row>
)
```

## Уровни акцента

Свойство `level` дива определяет различные уровни акцента, добавляя тень компоненту. Возможные значения `level` свойства можно найти в разделе `Sandbox` в нижней части страницы.
**ВАЖНО**: Тень не работает без цвета фона на мобильных устройствах.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: 'center',
  justifyContent: 'center',
  backgroundColor: 'white'
}
return (
  <Row>
    <Div style={divStyle} level={1}>
      <Span>Div level 1</Span>
    </Div>
    <Div style={divStyle} level={4} pushed>
      <Span>Div level 4</Span>
    </Div>
  </Row>
)
```

## Всплывающая подсказка

```jsx example
return pug`
  Div.root(tooltip='Содержимое подсказки')
    Icon(icon=faInfoCircle size='xl')
`

styl`
  .root
    align-self flex-start
`
```

## Песочница

<Sandbox
  Component={Div}
  props={{
    children: <Div styleName='child' />,
    style: { width: 160, height: 160, backgroundColor: '#2962FF' },
    onPress: () => alert('"onPress" event on "Div" component'),
    onLongPress: () => alert('"onLongPress" event on "Div" component')
  }}
/>