import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Swatch from '../Swatch';

export const swatchColors = [
    {
        id: 'pink',
        name: 'Pink',
        value: '#fbe2dd'
    },
    {
        id: 'blue',
        name: 'Blue',
        value: '#437790'
    },
    {
        id: 'midnight',
        name: 'Midnight',
        value: '#42474c'
    },
    {
        id: 'starlight',
        name: 'Starlight',
        value: '#faf7f4'
    },
    {
        id: 'red',
        name: 'Red',
        value: '#c72433'
    }
];

export const disabledSwatchColors = swatchColors
    .map(color => ({ ...color, isDisabled: true }));

export const rgbSwatchColors = [
    {
        id: 'pink',
        name: 'Pink',
        value: 'rgb(238, 130, 238)'
    },
    {
        id: 'blue',
        name: 'Blue',
        value: 'rgb(0, 0, 255)'
    },
    {
        id: 'violet',
        name: 'violet',
        value: 'rgb(106, 90, 205)'
    },
    {
        id: 'midnight',
        name: 'Midnight',
        value: '#42474c'
    }
];

export const invalidSwatchColors = [
    {
        id: undefined,
        name: undefined,
        value: undefined
    },
    {
        id: null,
        name: null,
        value: null
    },
    {
        id: 123,
        name: 123,
        value: 123
    },
    {
        id: 'starlight',
        name: 'Starlight',
        value: 'Starlight'
    },
    {
        id: '',
        name: '',
        value: ''
    },
    {
        id: 'lennyo',
        name: 'lennyo',
        value: '#lennyo'
    },
    {
        id: 'lennyo',
        name: 'lennyo',
        value: 'rgb("hi", "hello", "hey")'
    }
];

<Meta title="Atoms (Preview)/Swatch" component={Swatch} />

# Swatch
<br />

## `Swatchs` are used to display color options.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Swatch swatchColors={swatchColors} />
    </Story>
</Canvas>

### Color selected
<Canvas>
    <Story name="Color selected">
        <Swatch swatchColors={swatchColors} selectedColorId="blue" />
    </Story>
</Canvas>

### Color disabled
<Canvas>
    <Story name="Color disabled">
        <Swatch swatchColors={disabledSwatchColors} />
    </Story>
</Canvas>

### With RGB colors
<Canvas>
    <Story name="RGB colors">
        <Swatch swatchColors={rgbSwatchColors} />
    </Story>
</Canvas>

### With invalid colors
<Canvas>
    <Story name="Invalid colors">
        <Swatch swatchColors={invalidSwatchColors} />
    </Story>
</Canvas>

## Usage Example

```jsx
import Swatch from '@appdirect/sfb-theme-components/src/atoms/swatch/Swatch';

<Swatch swatchColors={[
    {
        id: 'violet',
        name: 'violet',
        value: 'rgb(106, 90, 205)'
    },
    {
        id: 'midnight',
        name: 'Midnight',
        value: '#42474c'
    },
]}
/>
```

## Props

<ArgsTable of={Swatch} />
