import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll } from './runner.js?v=4';

async function openEditor() {
    const card = document.querySelector('#board [data-id]');
    if (!card) return false;
    card.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
    for (let i = 0; i < 20; i++) {
        if ($('#modal')?.classList.contains('open')) return true;
        await sleep(100);
    }
    return false;
}

async function openPicker() {
    click('#md-asset-picker');
    for (let i = 0; i < 30; i++) {
        if (document.getElementById('asset-picker-flyout')) return true;
        await sleep(100);
    }
    return false;
}

describe('Asset Picker', () => {
    afterEach(async () => {
        document.getElementById('asset-picker-flyout')?.remove();
        await closeAll();
    });

    it('toolbar button exists', () => {
        expect($('#md-asset-picker')).toExist();
    });

    it('opens flyout with search and grid, toggles closed on second click', async () => {
        if (!await openEditor()) return;
        if (!await openPicker()) return;

        expect(document.getElementById('asset-picker-flyout')).toExist();
        expect(document.getElementById('asset-picker-search')).toExist();
        expect(document.getElementById('asset-picker-grid')).toExist();

        // Second click closes
        click('#md-asset-picker');
        for (let i = 0; i < 20; i++) {
            if (!document.getElementById('asset-picker-flyout')) break;
            await sleep(50);
        }
        expect(document.getElementById('asset-picker-flyout')).toBe(null);
    });

    it('search input filters tiles', async () => {
        if (!await openEditor()) return;
        if (!await openPicker()) return;

        const search = document.getElementById('asset-picker-search');
        if (!search) return;

        search.value = 'zzz_nonexistent_zzz';
        search.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(50);
        const grid = document.getElementById('asset-picker-grid');
        expect(grid.querySelectorAll('.asset-pick-tile').length).toBe(0);
    });
});