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

Div is a wrapper for a group of components, which can be clickable when getting the property `onPress`.

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

## Simple example
```jsx example
return (
  <Div>
    <Span>Div</Span>
  </Div>
)
```

## Clickable

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

## Layout

You can specify properties to manage layout:

- `row` - aligns children from left to right (default: `false`)
- `reverse` - aligns the children in reverse order depending on the direction (default: `false`)
- `wrap` - controls the wrapping of children into multiple rows (default: `false`)
- `align` - controls horizontal alignment (possible values: `left`, `center`, `right`)
- `vAlign` - controls vertical alignment (possible values: `top`, `center`, `bottom`)
- `gap` - defines the size of the gap between items in [units](/docs/tutorial/TricksWithStyles#units) or the value `true` is equivalent to `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>
)
```

## Full width (or height)

To make `Div` take all remaining space in the parent container (according to its `flex-direction`), pass the `full` property.

This property just sets `flex: 1` to it.

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

## Indentation between multiple Div

When displaying multiple Div(s) in a line spacing between them can be adjusted using `pushed` prop to specify indent from the previous Div. Possible values of `pushed` prop can be found in the `Sandbox` section at the bottom of the page. The `true` value of prop is equivalent to `m` value.

```jsx example
const divStyle = {
  width: 100,
  height: 80,
  textAlign: '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>
)
```

## Different clickable states

There are two clickable variants of component, controlled by `variant` property.

`opacity` variant - on press down, opacity of the component is decreased.

`highlight` variant - on press down, the opacity of the component background  is decreased.

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

## Levels of emphasis

Div `level` property determines different levels of emphasis by adding shadow to component. Possible values of `level` prop can be found in the `Sandbox` section at the bottom of the page.
**IMPORTANT**: Shadow does not work without background color on mobile devices.

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

## Tooltip

```jsx example
return pug`
  Div.root(tooltip='Tooltip content')
    Icon(icon=faInfoCircle size='xl')
`

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

## Sandbox

<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')
  }}
/>