import { useState } from 'react'
import Alert from '../Alert'
import Div from '../Div'
import Row from '../Row'
import Br from '../Br'
import Button from '../Button'
import { Sandbox } from '@startupjs/docs'
import { faFire, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'

# Alert (оповещение)

Оповещение отображает короткое, важное сообщение таким образом, чтобы привлечь внимание пользователя, не прерывая его работу.

```js
import { Alert } from '@startupjs/ui'
```

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

## Разновидности

Существует 4 типа предупреждений, каждый с уникальным цветом и значком: `info`, `success`, `warning`, `error`. Вы можете указать тип, передав свойство `variant`.

```jsx example
return (
  <Div>
    <Alert variant='info'>
      This is an info alert — check it out!
    </Alert>
    <Br />
    <Alert variant='success'>
      This is an success alert — check it out!
    </Alert>
    <Br />
    <Alert variant='warning'>
      This is an warning alert — check it out!
    </Alert>
    <Br />
    <Alert variant='error'>
      This is an error alert — check it out!  
    </Alert>
  </Div>
)
```

## Заголовок

Вы можете использовать свойство `title`, чтобы отобразить заголовок над содержимым.

```jsx example
return (
  <Div>
    <Alert
      variant='info'
      title='Info'
    >
      This is an info alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='success'
      title='Success'
    >
      This is an success alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='warning'
      title='Warning'
    >
      This is an warning alert — check it out!
    </Alert>
    <Br />
    <Alert
      variant='error'
      title='Error'
    >
      This is an error alert — check it out!
    </Alert>
  </Div>
)
```

## Иконки

Свойство `icon` позволяет изменить иконку в начале компонента.
Свойство `variant` определяет соответствующий цвет и для иконки.

Установка свойства `icon` в значение `false` полностью удалит иконку.

```jsx example
return (
  <Div>
    <Alert
      icon={faFire}
      variant='error'
    >
      Error alert with custom icon
    </Alert>
    <Br />
    <Alert
      icon={false}
      variant='warning'
    >
      Warning alert without icon
    </Alert>
  </Div>
)
```

## Действия

Alert может иметь действие (`onClose` свойство), например кнопку закрытия или отмены. Действие рендерится после сообщения, в конце Alert.

```jsx example
const [showFirstAlert, setShowFirstAlert] = useState(true)

return (
  <Div>
    {showFirstAlert && <Alert
      variant='warning'
      onClose={() => setShowFirstAlert(false)}
    >
      Warning alert with default actions
    </Alert>}
    <Br />
    <Button
      style={{ alignSelf: 'center' }}
      disabled={showFirstAlert}
      onPress={() => setShowFirstAlert(true)}
    >
      Re-Open
    </Button>
  </Div>
)
```

Свойство `renderActions` можно использовать для предоставления альтернативного компонента.

```jsx example
const [showSecondAlert, setShowSecondAlert] = useState(true)

const renderCustomCloseButton = () => {
  return (
    <Button
      color='success'
      variant='flat'
      size='s'
      onPress={() => setShowSecondAlert(false)}
    >
      CLOSE
    </Button>
  )
}

return (
  <Div>
    {showSecondAlert && <Alert
        variant='success'
        renderActions={renderCustomCloseButton}
      >
        Success alert with custom actions
      </Alert>}
    <Br />
    <Button
      style={{ alignSelf: 'center' }}
      disabled={showSecondAlert}
      onPress={() => setShowSecondAlert(true)}
    >
      Re-Open
    </Button>
  </Div>
)
```

## Sandbox

<Sandbox
  Component={Alert}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    children: 'Message content'
  }}
/>