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

import AvatarGroupIntroduction from './content/AvatarGroupIntroduction.mdx';

import { argTypesDefault, parameters, argTypesGrid, predefinedUsers } from './config';

import MAvatarGroup from '../../AvatarGroup';

<Meta title="AvatarGroup" component={MAvatarGroup} args="parameters" />

# Avatar Group

<AvatarGroupIntroduction />

## Stacked

export const Template = (args) => ({
  props: [
    'size',
    'avatar-size',
    'circle',
    'users',
    'selector-image',
    'selector-name',
    'auto',
    'reversed',
    'sparse'
  ],
  components: { MAvatarGroup },
  template: `
    <div class="pt-6">
      <m-avatar-group
        :size="$props.size"
        :avatar-size="$props.avatarSize"
        :circle="$props.circle"
        :users="$props.users"
        :selector-image="$props.selectorImage"
        :selector-name="$props.selectorName"
        :auto="$props.auto"
        :reversed="$props.reversed"
        :sparse="$props.sparse" />
    </div>
  `
});

<Canvas>
  <Story
    name="Stacked"
    args={{
      users: predefinedUsers
    }}
    argTypes={{ ...argTypesDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

#

<ArgsTable story="Stacked" />

## Grid

export const TemplateGrid = (args) => ({
  props: [
    'grid',
    'size',
    'avatar-size',
    'row-size',
    'circle',
    'users',
    'selector-image',
    'selector-name',
    'auto'
  ],
  components: { MAvatarGroup },
  template: `
    <div class="pt-6">
      <m-avatar-group
        :grid="$props.grid"
        :size="$props.size"
        :row-size="$props.rowSize"
        :avatar-size="$props.avatarSize"
        :circle="$props.circle"
        :users="$props.users"
        :selector-image="$props.selectorImage"
        :selector-name="$props.selectorName"
        :auto="$props.auto" />
    </div>
  `
});

<Canvas>
  <Story
    name="Grid"
    args={{
      users: predefinedUsers
    }}
    argTypes={{ ...argTypesGrid }}
  >
    {TemplateGrid.bind({})}
  </Story>
</Canvas>

#

<ArgsTable story="Grid" />