import { useState } from 'react'
import { pug } from 'startupjs'
import alert from './alert'
import confirm from './confirm'
import prompt from './prompt'
import Button from '../Button'
import Br from '../Br'
import Span from '../typography/Span'
import Table from '../table/Table'
import Thead from '../table/Thead'
import Tbody from '../table/Tbody'
import Tr from '../table/Tr'
import Th from '../table/Th'
import Td from '../table/Td'
import './index.mdx.styl'

# Dialogs

There are three kind of dialog boxes: alert, confirm and prompt.

```js
import { alert, confirm, prompt } from '@startupjs/ui'
```

## Alert box

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

An alert box is used if you want to display a message to the user that requires their attention.

When an alert box pops up, the user will have to click `OK` to proceed.

```js
async alert(message | { title?, message })
```

**Parameters:**

```js
await alert(message)
await alert(options)
```

`options`:

| Name    | Type   | Description                                            |
|---------|--------|--------------------------------------------------------|
| title   | string | An optional dialog's title                             |
| message | string | The message that is displayed below the dialog's title |

```jsx example
async function onPress () {
  await alert('I am an alert box')
}

return pug`
  Button(onPress=onPress) Show alert box
`
```

## Confirm box

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

A confirm box is used if you want to get user's permission for something.

When a confirm box pops up, the user will have to click either `OK` or `Cancel` to proceed.

If the user clicks `OK`, the function returns `true`. If the user clicks `Cancel`, the function returns `false`.

```js
async confirm(message | { title?, message })
```

**Parameters:**

```js
await confirm(message)
await confirm(options)
```

`options`:

| Name    | Type   | Description                                            |
|---------|--------|--------------------------------------------------------|
| title   | string | An optional dialog's title                             |
| message | string | The message that is displayed below the dialog's title |

```jsx example
const [pressedButtonText, setPressedButtonText] = useState()

async function onPress () {
  const isConfirmed = await confirm('Press a button')
  setPressedButtonText(isConfirmed ? 'OK' : 'Cancel')
}

return pug`
  Button(onPress=onPress) Show confirm box
  if pressedButtonText
    Br
    Span= 'You pressed ' + pressedButtonText + '!'
`
```

## Prompt box

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

A prompt box is used if you want the user to input a value to do further actions.

When a prompt box pops up, the user will have to click either `Cancel` or enter an input value and click `OK` to proceed.

If the user clicks `OK` the function returns the input value. If the user clicks `Cancel` the function returns `null`.

```js
async prompt(message | { title?, message, defaultValue? }, defaultValue?)
```

**Parameters:**

```js
const response = await prompt(message)
const response = await propmt(message, defaultValue)
const response = await prompt(options)
```

`options`:

| Name         | Type   | Description                                            |
|--------------|--------|--------------------------------------------------------|
| title        | string | An optional dialog's title                             |
| message      | string | The message that is displayed below the dialog's title |
| defaultValue | string | An optional initial value for the input field          |

```jsx example
const [name, setName] = useState()

async function onPress () {
  const name = await prompt('Please enter your name', 'Paha')
  setName(name)
}

return pug`
  Button(onPress=onPress) Show prompt box
  if name
    Br
    Span= 'Hello ' + name + '.'
`
```