import assert from 'node:assert/strict';
import { after, before, test } from 'node:test';
import { build } from 'esbuild';
import { chromium } from 'playwright';

let browser;
let bundle;

before(async () => {
    const result = await build({
        stdin: {
            contents: `
                import React from 'react';
                import { createRoot } from 'react-dom/client';
                import { AsyncCombobox } from './react/shared/ui/AsyncCombobox.jsx';
                import { CustomSelect } from './react/shared/ui/CustomSelect.jsx';
                window.requests = [];
                window.selected = null;
                window.submitted = false;
                function RequiredSelectForm() {
                    const [value, setValue] = React.useState('');
                    return <form onSubmit={event => { event.preventDefault(); window.submitted = true; }}>
                        <label htmlFor="required-select">Обязательный выбор</label>
                        <CustomSelect id="required-select" name="choice" required value={value} onChange={event => setValue(event.target.value)}>
                            <option value="">Выберите вариант</option>
                            <option value="valid">Правильный вариант</option>
                        </CustomSelect>
                        <button type="submit">Отправить</button>
                    </form>;
                }
                createRoot(document.getElementById('root')).render(
                    <><AsyncCombobox
                        selectedLabel="Выбранная группа"
                        selectedValue="1"
                        load={query => new Promise((resolve, reject) => {
                            window.requests.push({ query, resolve, reject });
                        })}
                        onSelect={item => { window.selected = item; }}
                    /><RequiredSelectForm /></>
                );
            `,
            resolveDir: process.cwd(),
            loader: 'jsx'
        },
        bundle: true,
        write: false,
        format: 'iife',
        jsx: 'automatic',
        define: { 'process.env.NODE_ENV': '"test"' }
    });
    bundle = result.outputFiles[0].text;
    browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium' });
});

after(async () => { await browser?.close(); });

async function fixture(t) {
    const page = await browser.newPage();
    const errors = [];
    page.on('pageerror', error => errors.push(error.message));
    t.after(async () => {
        await page.close();
        assert.deepEqual(errors, [], 'Компонент вызвал ошибку JavaScript');
    });
    await page.setContent('<style>.async-combobox-menu { position: absolute; }</style><div id="root"></div><button id="outside">Другой элемент</button>');
    await page.addScriptTag({ content: bundle });
    const input = page.getByRole('combobox', { name: 'Поисковый список', exact: true });
    await input.focus();
    await page.waitForFunction(() => window.requests.length === 1);
    return { page, input };
}

test('устаревший ответ или ошибка не заменяют новый поиск во время задержки', async t => {
    for (const outcome of ['resolve', 'reject']) {
        const { page, input } = await fixture(t);
        await input.fill('Новая группа');
        await page.evaluate(outcome => {
            const request = window.requests[0];
            if (outcome === 'resolve') request.resolve([{ id: 2, name: 'Устаревшая группа' }]);
            else request.reject(new Error('Ошибка старого запроса'));
        }, outcome);
        assert.equal(await page.getByRole('option').count(), 0, 'Устаревший вариант доступен для выбора');
        await page.getByText('Поиск...', { exact: true }).waitFor();
        await page.waitForFunction(() => window.requests.length === 2);
        await page.evaluate(() => window.requests[1].resolve([{ id: 3, name: 'Новая группа' }]));
        await page.getByRole('option', { name: 'Новая группа' }).waitFor();
        assert.equal(await page.getByRole('option').count(), 1);
    }
});

test('Escape из списка возвращает фокус и оставляет меню закрытым', async t => {
    const { page, input } = await fixture(t);
    await page.evaluate(() => window.requests[0].resolve([{ id: 2, name: 'Группа' }]));
    await page.getByRole('option').waitFor();
    await input.press('ArrowDown');
    await page.keyboard.press('Escape');
    assert.equal(await input.getAttribute('aria-expanded'), 'false');
    assert.equal(await input.evaluate(element => element === document.activeElement), true);
    assert.equal(await page.evaluate(() => window.requests.length), 1, 'Возврат фокуса запустил лишний поиск');
});

test('возврат стрелкой вверх сохраняет поисковый текст и результаты', async t => {
    const { page, input } = await fixture(t);
    await input.fill('Запрос');
    await page.waitForFunction(() => window.requests.length === 2);
    await page.evaluate(() => window.requests[1].resolve([{ id: 2, name: 'Результат' }]));
    await page.getByRole('option').waitFor();
    await input.press('ArrowDown');
    await page.keyboard.press('ArrowUp');
    assert.equal(await input.inputValue(), 'Запрос');
    assert.equal(await page.evaluate(() => window.requests.length), 2);
});

test('ввод после Escape открывает поиск, а уход фокуса отменяет отложенный запрос', async t => {
    const { page, input } = await fixture(t);
    await input.press('Escape');
    await input.fill('Новый запрос');
    assert.equal(await input.getAttribute('aria-expanded'), 'true');
    await page.locator('#outside').focus();
    await page.waitForTimeout(400);
    assert.equal(await input.getAttribute('aria-expanded'), 'false');
    assert.equal(await page.evaluate(() => window.requests.length), 1);
});

test('выбор варианта сохраняет значение и возвращает фокус без нового поиска', async t => {
    const { page, input } = await fixture(t);
    await page.evaluate(() => window.requests[0].resolve([{ id: 2, name: 'Группа' }]));
    await page.getByRole('option').click();
    assert.deepEqual(await page.evaluate(() => window.selected), { id: 2, name: 'Группа' });
    assert.equal(await input.getAttribute('aria-expanded'), 'false');
    assert.equal(await input.evaluate(element => element === document.activeElement), true);
    assert.equal(await page.evaluate(() => window.requests.length), 1);
});

test('обязательный селект показывает ошибку, получает фокус и разрешает отправку после выбора', async t => {
    const { page } = await fixture(t);
    const errors = [];
    page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
    const select = page.getByRole('combobox', { name: 'Обязательный выбор', exact: true });
    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
    assert.equal(await page.evaluate(() => window.submitted), false);
    await page.waitForFunction(() => document.activeElement?.getAttribute('aria-label') === 'Обязательный выбор');
    assert.equal(await select.evaluate(element => element === document.activeElement), true);
    assert.equal(await select.getAttribute('aria-invalid'), 'true');
    await page.getByRole('alert').filter({ hasText: 'Выберите значение' }).waitFor();
    await select.click();
    await page.getByRole('option', { name: 'Правильный вариант', exact: true }).click();
    assert.equal(await select.getAttribute('aria-invalid'), null);
    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
    assert.equal(await page.evaluate(() => window.submitted), true);
    assert.deepEqual(errors, [], 'Браузер не смог сфокусировать обязательный селект');
});