import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { View } from 'react-native';
import { mainColors } from '../../primitives';
import { Button } from '..';

<Meta title="Components/Button" component={Button} />

export const SampleButton = (args) => (
    <View style={{ width: '100%' }}>
        <Button {...args}>Try me</Button>
    </View>
);

# Button

Button component allows to render neoPOP styled - Elevated, Flat, and Link type of Button and trigger an `onPress` action on tap/press.

## Usage

-   Button component decides text color, background color, edge colors, and border color based on the `variant`, `kind`, and `colorMode` props.
-   Spacing of the button - height, padding, icon height (if any icon is passed) is decided by the `size` prop.
-   Text style of the button is also decided by the `size` prop.
-   Button component is super flexible as it supports these configs:
    -   `colorConfig` prop for all the colors
    -   `spacingConfig` prop for - height, iconHeight, and padding
    -   `textStyle` for custom textStyle - fontWeight, fontSize, fontType

<Canvas style={{ backgroundColor: '#0D0D0D' }}>
    <Story
        name="Sample Button"
        args={{
            kind: 'elevated',
            size: 'big',
            colorMode: 'light',
            onPress: () => {
                console.log("I'm pressed");
            },
        }}
    >
        {SampleButton.bind()}
    </Story>
</Canvas>

## Variants

### Kinds

There can be 3 different types of button.

<Canvas>
    <Button kind="flat">Flat</Button>
    <Button kind="elevated">Elevated</Button>
    <Button kind="link" color={mainColors.black}>
        Link
    </Button>
</Canvas>

There can be 2 different variants of `flat` and `elevated` kind buttton

<Canvas>
    <Button variant="primary" kind="flat" size="big">
        Primary
    </Button>
    <Button variant="secondary" kind="flat" size="big">
        Secondary
    </Button>
    <Button variant="primary" kind="elevated" size="big">
        Primary
    </Button>
    <Button variant="secondary" kind="elevated" size="big">
        Secondary
    </Button>
</Canvas>

### Sizes

<Canvas>
    <Button variant="primary" kind="flat" size="big">
        Big
    </Button>
    <Button variant="primary" kind="flat" size="medium">
        Medium
    </Button>
    <Button variant="primary" kind="flat" size="small">
        Small
    </Button>
</Canvas>

### Styles

<Canvas>
    <Button variant="primary">Only text</Button>
    <Button showArrow variant="primary">
        Text and arrow
    </Button>
    <Button
        variant="primary"
        icon={{
            uri: 'https://pngroyale.com/wp-content/uploads/2021/12/Download-blue-information-icon-Free-PNG-300x300.png',
        }}
    >
        Text, Icon, and arrow
    </Button>
</Canvas>

### States

<Canvas>
    <Button>Active</Button>
    <Button pressed>Pressed</Button>
    <Button disabled>Disabled</Button>
</Canvas>

## Props

<ArgsTable of={Button} />

`colorConfig` prop object takes in all the colors related to button.
It also takes `disabledColors` which takes in the same props but applied when `disabled` is true.

<div style={{ overflowX: 'auto' }}>

| field             | description                                                                                                      | type     |
| ----------------- | ---------------------------------------------------------------------------------------------------------------- | -------- |
| `borderColor`     | border color for the borders of face                                                                             | `string` |
| `backgroundColor` | background color for the face                                                                                    | `string` |
| `edgeColors`      | colors for the plunk (left, right, top, bottom) <br/> `{ left: color, top: color, right: color, bottom: color }` | `object` |
| `color`           | text color                                                                                                       | `string` |
| `disabledColors`  | object of `borderColor`, `backgroundColor`, `edgeColors`, and `color` to be applied when `disabled` is true.     | `string` |

</div>

`spacingConfig` prop object takes in `padding`, `height` and `iconHeight`

<div style={{ overflowX: 'auto' }}>

| field        | description                                                | type     |
| ------------ | ---------------------------------------------------------- | -------- |
| `padding`    | takes padding around the text - all CSS patterns supported | `string` |
| `height`     | height of the button - in px                               | `string` |
| `iconHeight` | fixed height for the icon, width is set to auto            | `string` |

</div>