import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'

import Avatar from '@baserow/modules/core/components/Avatar'

<Meta
    title="Baserow/Avatar"
    component={Avatar}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[withDesign]}
    argTypes={{
        color: {
            control: {
                type: 'select',
                options: [
                    'blue',
                    'cyan',
                    'green',
                    'yellow',
                    'red',
                    'magenta',
                    'purple',
                    'neutral',
                ],
            },
            defaultValue: 'blue',
        },
        initials: {
            control: {
                type: 'text',
            },
        },
        image: {
            control: {
                type: 'text',
            },
        },
        size: {
            control: {
                type: 'select',
                options: ['small', 'medium', 'large', 'x-large'],
            },
            defaultValue: 'medium',
        },
        rounded: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: true,
        },
    }}
/>

# Avatar

The avatar component is used to display a user's avatar. It can either be a colored circle with initials or a photo.

export const Template = (args, { argTypes }) => ({
    components: { Avatar },
    props: Object.keys(argTypes),
    template: `<Avatar v-bind="$props"></Avatar>`,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=55%3A1447&mode=dev',
}

<Canvas>
    <Story
        name="Default"
        args={{ color: 'blue', initials: 'RF' }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
    <Story
        name="Photo"
        args={{
            image: 'https://i.pinimg.com/736x/52/cc/3c/52cc3c8d5e427ca500f8bc5dd106cade.jpg',
        }}
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Avatar photo="image.jpg" size="x-large" rounded></Avatar>
```

## Props

<Props of={Avatar} />