const { test, expect } = require('@playwright/test');
const { waitForEditor, addBlockById, clearCanvas } = require('./helpers');

test.describe('Media Category Blocks Verification', () => {
    test('should show Image, Video, and File/PDF blocks in Media category', async ({ page }) => {
        await waitForEditor(page);

        // Verify all three blocks exist and are in Media category
        const mediaBlocks = await page.evaluate(() => {
            const editor = window.editor;
            const bm = editor.BlockManager;
            return ['image-block', 'video-block', 'file-embed'].map(id => {
                const block = bm.get(id);
                if (!block) return { id, found: false };
                const cat = block.get('category');
                return {
                    id,
                    found: true,
                    label: block.get('label'),
                    category: typeof cat === 'string' ? cat : (cat && cat.id),
                };
            });
        });

        for (const block of mediaBlocks) {
            expect(block.found).toBe(true);
            expect(block.category).toBe('Media');
        }

        console.log('All Media blocks are registered!');

        // Test adding Image block via API
        const imgResult = await addBlockById(page, 'image-block');
        expect(imgResult.success).toBe(true);

        const canvas = page.frameLocator('#gjs iframe').first();
        const img = canvas.locator('img');
        await expect(img).toBeVisible({ timeout: 3000 });
        console.log('Image block added successfully');

        // Clear canvas
        await clearCanvas(page);

        // Test adding Video block via API
        const vidResult = await addBlockById(page, 'video-block');
        expect(vidResult.success).toBe(true);

        const videoWrapper = canvas.locator('.video-wrapper');
        await expect(videoWrapper).toBeVisible({ timeout: 3000 });
        console.log('Video block added successfully');
    });
});