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

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

const avatar = new Avatar(document.querySelector('[data-c42-avatar]')!, {
  name: 'Jane Doe',
  status: 'online',
});

avatar.on('avatar:error', () => console.log('image failed, showing initials'));`;

const meta: Meta<AvatarOptions> = {
  title: 'Core/Media/Avatar',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    name: { control: 'text' },
    status: {
      control: 'select',
      options: [null, 'online', 'offline', 'busy', 'away'],
    },
  },
  args: {
    name: 'Jane Doe',
    status: null,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Avatar = '';
    root.innerHTML = `
      <img data-c42-avatar-image src="https://i.pravatar.cc/150?img=47" alt="Jane Doe" />
      <span data-c42-avatar-fallback></span>
      <span data-c42-avatar-status></span>`;
    new Avatar(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<AvatarOptions>;

export const Loaded: Story = {};

export const WithStatus: Story = {
  args: { status: 'online' },
};

export const BrokenSrcFallback: Story = {
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Avatar = '';
    root.innerHTML = `
      <img data-c42-avatar-image src="https://invalid.example/broken.png" alt="Grace Hopper" />
      <span data-c42-avatar-fallback></span>
      <span data-c42-avatar-status></span>`;
    new Avatar(root, args);
    return root;
  },
  args: { name: 'Grace Hopper', status: 'busy' },
};

export const InitialsOnly: Story = {
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Avatar = '';
    root.innerHTML = `
      <span data-c42-avatar-fallback></span>
      <span data-c42-avatar-status></span>`;
    new Avatar(root, args);
    return root;
  },
  args: { name: 'Ada Lovelace', status: 'away' },
};