import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { colorPalette, mainColors } from '../../primitives';
import { FontWeight } from '../../types';
import { hexToRGBA } from '../../utils';
import { Button, Typography } from '..';

<Meta title="Foundation/Customization" />

export const colorConfig = {
    backgroundColor: mainColors.black,
    color: mainColors.white,
    borderColor: '#E5FE40',
    edgeColors: {
        right: '#A2B42D',
        bottom: '#67721F',
        top: 'transparent',
        left: 'transparent',
    },
    disabledColors: {
        backgroundColor: colorPalette.black[50],
        color: hexToRGBA(mainColors.white, 0.5),
        edgeColors: {
            top: 'transparent',
            left: 'transparent',
            right: colorPalette.white[70],
            bottom: colorPalette.white[50],
        },
    },
};

export const CustomizeButton = (args) => (
    <Button
        size="big"
        colorMode="dark"
        variant="secondary"
        kind="elevated"
        colorConfig={colorConfig}
        {...args}
    >
        Scan QR
    </Button>
);

# How to Customize

All neoPOP components use default neoPOP styles based on props passed to the components.
The styles like color and typography is decided based on the `colors` and `typography` mentioned in Foundation respectively.
To customize the component even further with your own theme, we provide 2 ways

1. Extend color primitives
2. Custom props
3. Inline styles

## Extending color primitives

-   All the components by default read the colors in `neopop-react-native/primitives/colors` defined for the respective component
-   It's possible to override some/all the colors defined in `neopop-react-native/primitives/colors`
-   `neopop-react-native/primitives/colors` contains three configs, namely
    -   `mainColors`: this defines primary colors used overall
    -   `colorPalette`: this defines the neoPOP color palette (ideally you would not want to modify this)
    -   `colorGuide`: this defines the colors for each component. Every component have it's own structure to define their color guide, refer [here](https://github.com/CRED-CLUB/neopop-web/blob/src/primitives/colors.ts) for default color guide
-   To override the color primitives you can use the `extend` method

**make sure to call `extend` method in your `index` file before mounting the react node**

```jsx
import { extend } from 'neopop-react-native/primitives';

extend({
    mainColors: {
        black: '#000000',
    },
    colorGuide: {
        lightComponents: {
            buttons: {
                primary: {
                    backgroundColor: mainColors.black,
                },
            },
        },
    },
});
```

## Passing `colorConfig` to the component for colors

-   All component have a `colorConfig` object which takes in a object based on the configuration of that component
-   Check documentation for the object signature of each component
-   This config will override the default neoPOP style

Let's see how to customize the Button component

```jsx
import * as React from 'react';
import { Button } from 'neopop-react-native/components';
import { colorPalette, mainColors } from 'neopop-react-native/primitives';
import { hexToRGBA } from 'neopop-react-native/utils';

const colorConfig = {
    backgroundColor: mainColors.black,
    color: mainColors.white,
    borderColor: '#E5FE40',
    edgeColors: {
        right: '#A2B42D',
        bottom: '#67721F',
        top: 'transparent',
        left: 'transparent',
    },
    disabledColors: {
        backgroundColor: colorPalette.black[50],
        color: hexToRGBA(mainColors.white, 0.5),
        edgeColors: {
            top: 'transparent',
            left: 'transparent',
            right: colorPalette.white[70],
            bottom: colorPalette.white[50],
        },
    },
};

const MyCustomButton = (args) => (
    <Button
        size="big"
        colorMode="dark"
        variant="secondary"
        kind="elevated"
        colorConfig={colorConfig}
        {...args}
    >
        Scan QR
    </Button>
);

export default MyCustomButton;
```

<Canvas style={{ backgroundColor: '#0D0D0D' }}>
    <Story name="Custom ColorConfig Button">{CustomizeButton.bind()}</Story>
</Canvas>

## Passing `textStyle` to the component

-   Component that involves typography will have a prop called `textStyle` which accepts the `FontNameSpace` type object.
-   You can pass `fontWeight`, `fontSize`, and `fontType` to this object.

Let's customize the textStyle for the custom button:

```jsx
import { FontWeight } from 'neopop-react-native/types';

const MyCustomButton = () => (
    <Button
        size="big"
        colorMode="dark"
        variant="secondary"
        kind="elevated"
        colorConfig={colorConfig}
        textStyle={{
            fontType: 'heading',
            fontSize: 24,
            fontWeight: FontWeight.EXTRA_BOLD,
        }}
    >
        Scan QR
    </Button>
);
```

<Canvas style={{ backgroundColor: '#0D0D0D' }}>
    <Story
        name="Custom TextStyle Button"
        args={{
            textStyle: {
                fontType: 'heading',
                fontSize: 24,
                fontWeight: FontWeight.EXTRA_BOLD,
            },
        }}
    >
        {CustomizeButton.bind()}
    </Story>
</Canvas>

## Passing inline styles to the component

-   Some components support inline CSS style tag which gets applied to the top level element of the wrapper.

```jsx
<Typography style={{ textAlign: 'center' }}>my inline styled typography component</Typography>
```

<Canvas style={{ backgroundColor: '#0D0D0D' }}>
    <Typography style={{ textAlign: 'center' }}>my inline styled typography component</Typography>
</Canvas>