import { provideAnimations } from '@angular/platform-browser/animations';
import { applicationConfig, argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { AvatarComponent, AvatarListComponent, AvatarPictureDirective } from '../../public-api';

const meta: Meta<AvatarListComponent> = {
  title: 'Components/Avatar/Avatar List',
  id: 'avatar-list',
  component: AvatarListComponent,
  decorators: [
    applicationConfig({
      providers: [provideAnimations()]
    }),
    moduleMetadata({
      imports: [AvatarComponent, AvatarPictureDirective]
    })
  ],
  argTypes: {
    remainingClick: {
      control: {
        type: null
      }
    }
  },
  parameters: {
    docs: {
      imports: [AvatarListComponent, AvatarComponent, AvatarPictureDirective]
    }
  }
};

export default meta;

type Story = StoryObj<AvatarListComponent>;

export const AvatarList: Story = {
  args: {
    max: 4
  },
  render: (args) => {
    const options = {
      label: 'Massinissa',
      placement: 'bottom',
      tooltipId: 'test'
    };
    return {
      props: {
        ...args,
        options
      },
      template: `
    <nj-avatar-list ${argsToTemplate(args)}>
      <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"
        />
      </nj-avatar>
      <nj-avatar [tooltipOptions]="options" label="User profile" [isClickable]="true"></nj-avatar>
      <nj-avatar label="User profile"></nj-avatar>
      <nj-avatar label="User profile"></nj-avatar>
      <nj-avatar label="User profile"></nj-avatar>
      <nj-avatar label="User profile"></nj-avatar>
      <nj-avatar label="User profile"></nj-avatar>
    </nj-avatar-list>
  `
    };
  }
};

export const AvatarTooltip: Story = {
  args: {
    max: 4
  },
  render: (args) => {
    const options = {
      label: 'Massinissa',
      placement: 'bottom',
      tooltipId: 'tooltip-massi'
    };
    const remainingOptions = {
      label: 'David, Dorian, Maxime',
      placement: 'bottom',
      tooltipId: 'tooltip-rest'
    };
    return {
      props: {
        ...args,
        options,
        remainingOptions
      },
      template: `
      <nj-avatar-list ${argsToTemplate(args)}>
        <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"
          />
        </nj-avatar>
        <nj-avatar [tooltipOptions]="options" label="User profile" [isClickable]="true"></nj-avatar>
        <nj-avatar label="User profile"></nj-avatar>
        <nj-avatar label="User profile"></nj-avatar>
        <nj-avatar label="User profile"></nj-avatar>
        <nj-avatar label="User profile"></nj-avatar>
        <nj-avatar label="User profile"></nj-avatar>
      </nj-avatar-list>
    `
    };
  }
};