import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Avatar } from 'components/avatar';
import { Bell, Star, StarFill } from 'icons';
import { AvatarListProps, AvatarList, AvatarUser } from './AvatarList';

export default {
  title: 'Design System/AvatarList',
  component: AvatarList,
  subcomponents: {
    Avatar,
  },
  argTypes: {
    colorVariant: {
      options: [
        'base',
        'base-01',
        'base-02',
        'secondary',
        'secondary-01',
        'primary',
        'primary-01',
        'success',
        'success-01',
        'transparent',
      ],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Avatar>;

const avatarsList: AvatarListType = [
  {
    users: [
      {
        id: '13ert',
        uri: 'https://avatars.githubusercontent.com/u/39033532',
      },
      {
        id: '153eft',
        uri: 'https://avatars.githubusercontent.com/u/68179593',
      },
      {
        id: '153eft',
        uri: 'https://avatars.githubusercontent.com/u/68179593',
      },
    ],
  },
  {
    users: [
      {
        id: '183eft',
        icon: <Bell />,
      },
      {
        id: '883eft',
        icon: <Star />,
      },
      {
        id: '8t83eft',
        icon: <StarFill />,
      },
    ],
  },
  {
    users: [
      {
        id: '8t6h32wft',
        icon: <Bell />,
      },
      {
        id: '8e326h32wft',
        icon: <Star />,
      },
      {
        id: '8e326h8u2wft',
        icon: <StarFill />,
      },
    ],
  },
  {
    users: [
      {
        id: '8e2r63h2wft',
        title: 'Lebogang Mabala',
      },
      {
        id: '8e2r63h87jhbd2wft',
        title: 'Khalil Omer',
      },
      {
        id: '8e23re63fh87j2wft',
        title: 'Muhammad Sarmad',
      },
    ],
  },
];

export const Interactive: AvatarListTemplate = (args) => {
  return (
    <>
      {avatarsList.map((avatars) => (
        <AvatarList mt="m" {...args} users={avatars.users} />
      ))}
    </>
  );
};
type AvatarListTemplate = Stories.Template<AvatarListProps>;

type AvatarListItem = {
  users: AvatarUser[];
};

type AvatarListType = AvatarListItem[];
Interactive.args = {
  size: 30,
  bordered: true,
  colorVariant: 'base-01',
};