import { useState } from 'react'
import { pug } from 'startupjs'
import Button from '../Button'
import Div from '../Div'
import Row from '../Row'
import Br from '../Br'
import { Sandbox } from '@startupjs/docs'
import {
  faHouseUser,
  faCheck,
  faCoffee
} from '@fortawesome/free-solid-svg-icons'
import './index.mdx.styl'

# Button

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

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

## Simple example
```jsx example
const [counter, setCounter] = useState(0)

return (
  <Button onPress={() => setCounter(counter + 1)}>
    Clicked {counter} times
  </Button>
)
```

## Async button

```jsx example
async function onPress() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, 5000)
  })
}

return (
  <Button onPress={onPress}>
    Async button
  </Button>
)
```

## Variants

The `variant` property is responsible for the external display of the button (affects the color of the icon and button text). Default value is `outlined`.

```jsx example
return pug`
  Div
    Button(
      onPress=() => console.log('pressed')
      icon=faCoffee
    ) Outlined
    Br
    Button(
      onPress=() => console.log('pressed')
      variant='flat'
      icon=faCoffee
    ) Flat
    Br
    Button(
      onPress=() => console.log('pressed')
      variant='text'
      icon=faCoffee
    ) Text
`
```

## Colors

Color is `dark` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```jsx example
return (
  <Div>
    <Button onPress={() => console.log('pressed')} variant='flat'>
      Default dark
    </Button>
    <Br />
    <Button onPress={() => console.log('pressed')} color='primary' variant='flat'>
      Primary
    </Button>
    <Br />
    <Button onPress={() => console.log('pressed')} color='success' variant='flat'>
      Success
    </Button>
  </Div>
)
```

## Sizes

The `size` property applies to the button size, icon and button text. Default value is `m`. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```jsx example
return (
  <Div>
    <Button variant='flat' size='s' icon={faCheck}>
      Small
    </Button>
    <Br />
    <Button variant='flat' icon={faCheck}>
      Default
    </Button>
    <Br />
    <Button variant='flat' size='l' icon={faCheck}>
      Large
    </Button>
  </Div>
)
```

## Icons

Icon can be added using `icon` property. Position of icon can be changed by passing `iconPosition` to component (`left` by default). To change icon color use the `iconStyleName` property.

In `.styl` file
```stylus
.icon
  color $UI.colors.success
```

```jsx example
return (
  <Div>
    <Button icon={faCoffee} iconStyleName='icon'>
      Icon on the left (default) with the changed color
    </Button>
    <Br />
    <Button icon={faCoffee} iconPosition='right'>
      Icon on the right
    </Button>
  </Div>
)
```

## Call to Action

Try to keep the variety of button combinations you use in your app to the minimum.

Use regular Button without any options by default. Whenever you want to emphasize a particular `Call-to-Action`, use a primary flat button.

```jsx example
<Button color='primary' variant='flat'>
  Destroy the Death Star!
</Button>
```

## Buttons order

Whenever specifiying several buttons on one line, stick to the order of buttons which people are used to from various OS'es. `Cancel` should be first, and then `OK`.

Never put multiple `Call-to-Action` buttons in one component. And try to keep the amount of them visible at the same time on one page to the minimum.

It's a much better UX decision to use regular buttons by default and decide which of them to make a `Call-to-Action` later.

```jsx example
<Row align='right'>
  <Button>
    Cancel
  </Button>
  <Button pushed color='primary' variant='flat'>
    OK
  </Button>
</Row>
```

## Sandbox

<Sandbox
  Component={Button}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    children: 'Press me',
    onPress: () => alert('"onPress" event on "Button" component'),
    onLongPress: () => alert('"onLongPress" event on "Button" component')
  }}
/>