import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import ImageBlock from './ImageBlock.svelte';
import type { ImageBlock as ImageBlockType } from '$lib/types/content-blocks';

describe('ImageBlock', () => {
	it('renders a single image', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					image: { $type: 'blob', ref: { $link: '/img/test.png' }, mimeType: 'image/png', size: 1024 },
					alt: 'Test image'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const img = screen.getByRole('img');
		expect(img).toHaveAttribute('src', '/img/test.png');
		expect(img).toHaveAttribute('alt', 'Test image');
	});

	it('renders multiple images', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					image: { $type: 'blob', ref: { $link: '/img/1.png' }, mimeType: 'image/png', size: 1024 },
					alt: 'Image 1'
				},
				{
					image: { $type: 'blob', ref: { $link: '/img/2.png' }, mimeType: 'image/png', size: 2048 },
					alt: 'Image 2'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const images = screen.getAllByRole('img');
		expect(images).toHaveLength(2);
	});

	it('applies lazy loading', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					image: { $type: 'blob', ref: { $link: '/img/lazy.png' }, mimeType: 'image/png', size: 512 },
					alt: 'Lazy'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const img = screen.getByRole('img');
		expect(img).toHaveAttribute('loading', 'lazy');
	});

	it('renders an image with externalUri instead of blob', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					externalUri: 'https://example.com/photo.jpg',
					alt: 'External image'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const img = screen.getByRole('img');
		expect(img).toHaveAttribute('src', 'https://example.com/photo.jpg');
		expect(img).toHaveAttribute('alt', 'External image');
	});

	it('prefers externalUri over blob when both are present', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					image: { $type: 'blob', ref: { $link: '/img/blob.png' }, mimeType: 'image/png', size: 1024 },
					externalUri: 'https://example.com/external.jpg',
					alt: 'Both provided'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const img = screen.getByRole('img');
		expect(img).toHaveAttribute('src', 'https://example.com/external.jpg');
	});

	it('renders alt text as sr-only caption', () => {
		const block: ImageBlockType = {
			$type: 'at.riven.block.image',
			images: [
				{
					image: { $type: 'blob', ref: { $link: '/img/a.png' }, mimeType: 'image/png', size: 100 },
					alt: 'Descriptive text'
				}
			]
		};
		render(ImageBlock, { props: { block } });
		const caption = screen.getByTestId('image-block').querySelector('figcaption');
		expect(caption?.textContent).toBe('Descriptive text');
		expect(caption?.className).toContain('sr-only');
	});
});