import type { Meta, StoryObj } from '@storybook/html';
import { Avatar } from '@42/core/avatar';
import { AvatarGroup, type AvatarGroupOptions } from '@42/core/avatar-group';
import '@42/styles/avatar.css';
import '@42/styles/avatar-group.css';

const snippet = `import { AvatarGroup } from '@42/core/avatar-group';
import '@42/styles/avatar-group.css';

const group = new AvatarGroup(document.querySelector('[data-c42-avatar-group]')!, {
  stacked: true,
  spacing: 'md',
  max: 4,
  label: 'Project members',
});

group.on('avatar-group:change', (e) => console.log(e.detail)); // { total, visible, overflow }`;

const PEOPLE = [
  { img: 'https://i.pravatar.cc/150?img=12', name: 'Jane Doe' },
  { img: 'https://i.pravatar.cc/150?img=32', name: 'Grace Hopper' },
  { img: 'https://i.pravatar.cc/150?img=47', name: 'Ada Lovelace' },
  { img: '', name: 'Alan Turing' },
  { img: 'https://i.pravatar.cc/150?img=5', name: 'Katherine Johnson' },
  { img: 'https://i.pravatar.cc/150?img=8', name: 'Linus Torvalds' },
];

function buildGroup(args: AvatarGroupOptions, count = PEOPLE.length): HTMLElement {
  const root = document.createElement('div');
  root.dataset.c42AvatarGroup = '';

  PEOPLE.slice(0, count).forEach((person) => {
    const avatar = document.createElement('div');
    avatar.dataset.c42Avatar = '';
    avatar.innerHTML = person.img
      ? `<img data-c42-avatar-image src="${person.img}" alt="${person.name}" />
         <span data-c42-avatar-fallback></span>`
      : `<span data-c42-avatar-fallback></span>`;
    new Avatar(avatar, { name: person.name });
    root.appendChild(avatar);
  });

  const overflow = document.createElement('span');
  overflow.dataset.c42AvatarOverflow = '';
  root.appendChild(overflow);

  new AvatarGroup(root, args);
  return root;
}

const meta: Meta<AvatarGroupOptions> = {
  title: 'Core/Media/AvatarGroup',
  tags: ['autodocs'],
  parameters: {
    docs: { source: { code: snippet, language: 'ts' } },
  },
  argTypes: {
    stacked: { control: 'boolean' },
    spacing: { control: 'select', options: ['sm', 'md', 'lg'] },
    max: { control: { type: 'number', min: 0, max: 6 } },
    label: { control: 'text' },
  },
  args: {
    stacked: true,
    spacing: 'md',
    max: 0,
    label: 'Project members',
  },
  render: (args) => buildGroup(args),
};

export default meta;

type Story = StoryObj<AvatarGroupOptions>;

export const Stacked: Story = {};

export const WithOverflow: Story = {
  args: { max: 4 },
};

export const Spaced: Story = {
  args: { stacked: false },
};