import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Knowledge } from 'icons';
import { Row } from 'components/layout';
import { colors } from 'theme/color';
import { textVariantList } from 'components';
import { Avatar } from './index';

export default {
  title: 'Design System/Avatar',
  component: Avatar,

  argTypes: {
    shapeVariant: {
      options: ['square', 'circle'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: [
        'base',
        'base-01',
        'base-02',
        'secondary',
        'secondary-01',
        'primary',
        'primary-01',
        'success',
        'success-01',
        'transparent',
      ],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['extra-small', 'small', 'medium', 'large', 'extra-large'],
      control: { type: 'select' },
    },
    titleVariant: {
      options: textVariantList,
      control: { type: 'select' },
    },
    borderedColor: {
      options: colors,
      control: { type: 'select' },
    },
    titleColor: {
      options: colors,
      control: { type: 'select' },
    },
    status: {
      options: ['online', 'offline', 'out-of-office'],
      control: { type: 'select' },
    },
    statusBorderVariant: {
      options: colors,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof Avatar>;

const avatarsList: AvatarGroupProps = [
  {
    avatars: [
      {
        icon: <Knowledge />,
      },
      {
        uri: 'https://avatars.githubusercontent.com/u/98377997',
      },
      {
        title: 'Muhammad',
      },
    ],
  },
];

export const Interactive: ComponentStory<typeof Avatar> = (args) => {
  return (
    <>
      {avatarsList.map((item) => (
        <Row bg="base-01" p="s" alignItems="center">
          {item.avatars.map((avatar) => (
            <Avatar ml="xs" {...args} uri={avatar.uri} title={avatar.title} icon={avatar.icon} />
          ))}
        </Row>
      ))}
    </>
  );
};

Interactive.args = {
  title: 'sarmad',
  titleColor: 'body',
  sizeVariant: 'medium',
  colorVariant: 'base',
  shapeVariant: 'circle',
  size: 40,
  status: 'online',
  statusBorderVariant: 'base',
  borderColor: 'primary',
  titleVariant: 'title',
  bordered: true,
  borderedWidth: 5,
  editable: false,
};

type AvatarProps = {
  title?: string;
  size?: number;
  ml?: string;
  icon?: JSX.Element;
  uri?: string;
};
type AvatarGroupItem = {
  avatars: AvatarProps[];
};
type AvatarGroupProps = AvatarGroupItem[];