import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import { h } from 'vue';
import UiAvatar from '../UiAvatar.vue';
import UiAvatarImage from '../UiAvatarImage.vue';
import UiAvatarFallback from '../UiAvatarFallback.vue';
import UiAvatarGroup from '../UiAvatarGroup.vue';

describe('UiAvatar', () => {
  test('renders image with src and alt attributes', () => {
    const { getByRole } = render(UiAvatar, {
      slots: {
        default: () =>
          h(UiAvatarImage, {
            src: 'https://example.com/avatar.png',
            alt: 'User avatar',
          }),
      },
    });

    // reka-ui hides image until it loads; in JSDOM images never load, so use hidden: true
    const img = getByRole('img', { hidden: true });
    expect(img).toHaveAttribute('src', 'https://example.com/avatar.png');
    expect(img).toHaveAttribute('alt', 'User avatar');
  });

  test('renders fallback content', () => {
    const { container, getByText } = render(UiAvatar, {
      slots: {
        default: () => h(UiAvatarFallback, null, () => 'AB'),
      },
    });

    expect(
      container.querySelector('[data-slot="avatar-fallback"]'),
    ).toBeInTheDocument();
    expect(getByText('AB')).toBeInTheDocument();
  });

  test('renders default size', () => {
    const { container } = render(UiAvatar, {
      slots: {
        default: () => h(UiAvatarFallback, null, () => 'AB'),
      },
    });

    expect(container.querySelector('[data-slot="avatar"]')).toHaveClass(
      'size-8',
    );
  });

  test.each([
    [5, 'size-5'],
    [6, 'size-6'],
    [8, 'size-8'],
    [10, 'size-10'],
    [12, 'size-12'],
    ['12', 'size-12'],
  ])('renders size %s as %s', (size, sizeClass) => {
    const { container } = render(UiAvatar, {
      props: {
        size,
      },
      slots: {
        default: () => h(UiAvatarFallback, null, () => 'AB'),
      },
    });

    expect(container.querySelector('[data-slot="avatar"]')).toHaveClass(
      sizeClass,
    );
  });

  test('forwards custom class to avatar root', () => {
    const { container } = render(UiAvatar, {
      props: {
        class: 'ring-1',
      },
      slots: {
        default: () => h(UiAvatarFallback, null, () => 'AB'),
      },
    });

    expect(container.querySelector('[data-slot="avatar"]')).toHaveClass(
      'ring-1',
    );
  });

  test('renders grouped avatars', () => {
    const { container } = render(UiAvatarGroup, {
      slots: {
        default: () => [
          h(UiAvatar, null, () => h(UiAvatarFallback, null, () => 'AB')),
          h(UiAvatar, null, () => h(UiAvatarFallback, null, () => 'CD')),
        ],
      },
    });

    const group = container.querySelector('[data-slot="avatar-group"]');
    expect(group).toBeInTheDocument();
    expect(group?.querySelectorAll('[data-slot="avatar"]')).toHaveLength(2);
  });

  test('applies avatar group stacking styles and custom classes', () => {
    const { container } = render(UiAvatarGroup, {
      props: {
        class: 'custom-group',
      },
      slots: {
        default: () =>
          h(UiAvatar, null, () => h(UiAvatarFallback, null, () => 'AB')),
      },
    });

    const group = container.querySelector('[data-slot="avatar-group"]');
    expect(group).toHaveClass('flex');
    expect(group).toHaveClass('items-center');
    expect(group).toHaveClass('custom-group');
    expect(group?.className).toContain('[&>*+*]:-ml-2');
    expect(group?.className).toContain(
      '*:data-[slot=avatar]:ring-background-surface-primary',
    );
  });
});
