import { describe, it, expect } from 'vitest';
import { render } from 'vitest-browser-svelte';
import AnnotationShape from './AnnotationShape.svelte';
import type { Annotation } from '$lib/types';

const annotation: Annotation = {
	id: 'ann-1',
	documentId: 'doc-1',
	pageNumber: 1,
	x: 0.1,
	y: 0.2,
	width: 0.3,
	height: 0.4,
	color: '#00c7b1',
	createdAt: '2026-01-01T00:00:00Z'
};

describe('AnnotationShape', () => {
	describe('isResizable prop', () => {
		it('does not render AnnotationEditOverlay when isResizable is false', async () => {
			render(AnnotationShape, {
				annotation,
				isHovered: false,
				isActive: false,
				isResizable: false,
				onclick: () => {},
				onpointerenter: () => {},
				onpointerleave: () => {}
			});

			const handles = document.querySelectorAll('[data-handle]');
			expect(handles).toHaveLength(0);
		});

		it('renders AnnotationEditOverlay when isResizable is true', async () => {
			render(AnnotationShape, {
				annotation,
				isHovered: false,
				isActive: true,
				isResizable: true,
				onclick: () => {},
				onpointerenter: () => {},
				onpointerleave: () => {}
			});

			const handles = document.querySelectorAll('[data-handle]');
			expect(handles).toHaveLength(8);
		});
	});
});