import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Swatch from '../Swatch';
import * as SwatchStories from './Swatch.stories';

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 of={SwatchStories} />

# Swatch

<br />

## `Swatchs` are used to display color options.

<br />

### Default

<Canvas>
  <Story of={SwatchStories.Default} />
</Canvas>

### Color selected

<Canvas>
  <Story of={SwatchStories.ColorSelected} />
</Canvas>

### Color disabled

<Canvas>
  <Story of={SwatchStories.ColorDisabled} />
</Canvas>

### With RGB colors

<Canvas>
  <Story of={SwatchStories.RgbColors} />
</Canvas>

### With invalid colors

<Canvas>
  <Story of={SwatchStories.InvalidColors} />
</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} />
