import { useState, useCallback } from 'react'
import { pug } from 'startupjs'
import User from '../User'
import Div from '../Div'
import Br from '../Br'
import Span from '../typography/Span'
import { Sandbox } from '@startupjs/docs'
import { styl } from 'startupjs'

# User

Inherits [Div props](/docs/components/Div).

User is used to display information about users. It uses [Avatar](/docs/components/Avatar) component to display user avatar.

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

## Simple example

```jsx example
return (
  <User avatarUrl='/img/avatar1.jpeg' />
)
```

## Sizes

Size is `m` by default. It can be changed by changing `size` prop. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```jsx example
return (
  <Div>
    <User
      size='s'
      avatarUrl='/img/avatar2.jpeg'
      name='John Doe'
      description='s size'
    />
    <Br />
    <User
      avatarUrl='/img/avatar3.jpeg'
      name='John Doe'
      description='m size, this is the default size'
    />
    <Br />
    <User
      size='l'
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='l size'
    />
  </Div>
)
```

## User status

To display user online status on avatar you can pass string `online` or `away` to property `status`.

```jsx example
return (
  <Div>
    <User
      status='online'
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='Online description'
    />
    <Br />
    <User
      status='away'
      avatarUrl='/img/avatar2.jpeg'
      name='John Doe'
      description='Offline description'
      pushed
    />
  </Div>
)
```

## User avatar position

Avatar position can be modified by passing string `left` (default) or `right` to `avatarPosition` property.

```jsx example
return (
  <User
    avatarPosition='right'
    avatarUrl='/img/avatar1.jpeg'
    name='John Doe'
    description='The cat is a domestic species of small carnivorous mammal'
  />
)
```

## Actions

Passed handler to `onPress` property will be called when the user taps the component.

```jsx example
const [clicked, setClicked] = useState(0)
return (
  <Div>
    <User
      avatarUrl='/img/avatar1.jpeg'
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      onPress={() => setClicked(clicked + 1)}
    />
    <Br />
    <Span>
      {clicked ? `User clicked ${clicked} ${clicked === 1 ? 'time' : 'times'}` : 'Click on user'}
    </Span>
  </Div>
)
```

## Custom status icon

You can provide custom components for the status icon using `statusComponents` prop.

```jsx example
const AbsentStatus = useCallback(({ style }) => (
  <Div style={style} styleName='absent'>
    <Div styleName='absent-line absent-line-1' />
    <Div styleName='absent-line absent-line-2' />
  </Div>
))

return pug`
  Div
    User(
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      src='/img/avatar1.jpeg'
      status='online'
    )
    Br
    User(
      name='John Doe'
      description='The cat is a domestic species of small carnivorous mammal'
      src='/img/avatar2.jpeg'
      status='absent'
      statusComponents={
        absent: AbsentStatus
      }
    )
`

styl`
  .absent
    background-color white
    justify-content center
    &-line
      position absolute
      height 2px
      left 0
      right 0
      background-color red
      &-1
        transform rotate(45deg)
      &-2
        transform rotate(-45deg)
`
```

## Sandbox

<Sandbox
  Component={User}
  props={{
    onPress: () => alert('"onPress" event on "User" component'),
  }}
/>