import { ComponentStory, ComponentMeta } from '@storybook/react';
import AvatarGroup from './avatar-group';
import fill from 'lodash/fill';
import { Avatar } from '../avatar';

const argTypes: ComponentMeta<typeof AvatarGroup>['argTypes'] = {
  // ts will not allow adding parameters not included in the component type
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  numberOfAvatars: {
    description: `Set's the number of avatars, only for demonstration purposes, this parameter doesn't exists in the component`,
    type: 'number',
    defaultValue: 10,
    control: { type: 'number', min: 0 }
  },
  size: {
    description: `The size of the avatars`,
    type: 'string',
    options: ['small', 'medium', 'large', 'xlarge', undefined],
    control: { type: 'select' }
  },
  onCounterClick: {
    description: `Counter click callback`,
    type: 'function',
    action: 'counter clicked'
  },
  stacked: {
    type: 'boolean',
    defaultValue: true,
    description: `Enable or disable stacking avatars on top of each other`
  },
  max: {
    type: 'number',
    defaultValue: 6,
    control: { type: 'number', min: 0 },
    description: `Max visible avatars minus the counter avatar. e.g. if there are 10 avatars and max is 5 then we will see 4 avatars + the counter. and there will be 6 hidden`
  }
};
export default {
  args: {
    size: 'medium',
    stacked: true
  },
  title: 'Avatar Group',
  component: AvatarGroup,
  argTypes
} as ComponentMeta<typeof AvatarGroup>;

const Template: ComponentStory<typeof AvatarGroup> = ({
  // ts will not allow adding parameters not included in the component type
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-ignore
  numberOfAvatars = 10,
  size,
  customSize = 0,
  ...rest
}) => {
  return (
    <AvatarGroup size={size} {...rest}>
      {fill(
        new Array(numberOfAvatars),
        <Avatar initials="JK" size={size} sx={{ bgcolor: 'green' }} />
      )}
    </AvatarGroup>
  );
};

export const Story = Template.bind({});
Story.storyName = 'Avatar Group';