import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { AvatarComponent, AvatarPictureDirective } from '../../public-api';

const meta: Meta<AvatarComponent> = {
  title: 'Components/Avatar/Avatar',
  id: 'avatar',
  component: AvatarComponent,
  argTypes: {
    size: {
      table: {
        defaultValue: {
          summary: 'md'
        }
      }
    }
  },
  decorators: [
    moduleMetadata({
      imports: [AvatarPictureDirective]
    })
  ],
  parameters: {
    docs: {
      imports: [AvatarComponent, AvatarPictureDirective]
    }
  }
};

export default meta;

type Story = StoryObj<AvatarComponent>;

export const Avatar: Story = {
  args: {
    notificationCapedValue: 99,
    notificationUnitLabel: 'unread messages',
    label: 'User Profile'
  }
};
export const Image: Story = {
  render: () => ({
    template: `
    <nj-avatar [hasPicture]="true" label="Some person">
      <img
        njAvatarPicture
        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NXx8cGVyc29uYXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80"
        alt=""
      />
    </nj-avatar>
  `
  })
};