import { mockMatchMedia, render, screen } from '../../test-utils';
import { ListItem, type ListItemProps } from '../ListItem';

mockMatchMedia();

const baseProps = {
  title: 'Test Title',
};

const avatarProps = {
  imgSrc: 'avatar.jpg',
  profileName: 'User Avatar',
};

const renderWithMedia = (media: ListItemProps['media']) =>
  render(<ListItem title={baseProps.title} media={media} />);

describe('ListItem.AvatarView', () => {
  it('applies custom className alongside default class', () => {
    const { container } = renderWithMedia(
      <ListItem.AvatarView
        className="custom-class"
        imgSrc={avatarProps.imgSrc}
        profileName={avatarProps.profileName}
      />,
    );

    expect(container.querySelector('.custom-class')).toBeInTheDocument();
  });

  it('renders avatar with correct image src', () => {
    renderWithMedia(
      <ListItem.AvatarView imgSrc={avatarProps.imgSrc} profileName={avatarProps.profileName} />,
    );

    expect(screen.getByRole('presentation')).toHaveAttribute('src', avatarProps.imgSrc);
  });

  it('renders without image when no imgSrc provided', () => {
    renderWithMedia(<ListItem.AvatarView profileName={avatarProps.profileName} />);
    expect(screen.queryByRole('img')).not.toBeInTheDocument();
  });

  it('supports accessibility props', () => {
    renderWithMedia(
      <ListItem.AvatarView
        imgSrc={avatarProps.imgSrc}
        profileName={avatarProps.profileName}
        aria-label="Profile picture"
      />,
    );

    expect(screen.getByLabelText('Profile picture')).toBeInTheDocument();
  });

  it('passes through role attribute', () => {
    renderWithMedia(
      <ListItem.AvatarView
        imgSrc={avatarProps.imgSrc}
        profileName={avatarProps.profileName}
        role="button"
        aria-label="Profile button"
      />,
    );

    expect(screen.getByRole('button', { name: 'Profile button' })).toBeInTheDocument();
  });

  it('renders initials when no image provided', () => {
    const johnDoeProfile = 'John Doe';
    renderWithMedia(<ListItem.AvatarView profileName={johnDoeProfile} />);

    expect(screen.getByText('JD')).toBeInTheDocument();
  });
});