import { expect, test } from '@playwright/test';

for (const width of [320, 1280]) {
  test(`playlists at ${width}px`, async ({ page }, info) => {
    await page.setViewportSize({ width, height: 900 });
    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
    await page.goto('/login');
    await page.getByLabel('Логин', { exact: true }).fill('alice');
    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
    await page.getByRole('button', { name: 'Войти', exact: true }).click();
    if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
    await page.getByRole('link', { name: 'Плейлисты', exact: true }).click();
    await page.getByRole('button', { name: 'Создать плейлист', exact: true }).click();
    await page.getByLabel('Название', { exact: true }).fill('Музыка для долгой дороги');
    await page.getByLabel('Описание', { exact: true }).fill('Любимые песни всегда рядом');
    await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
    await expect(page.getByRole('heading', { name: 'Музыка для долгой дороги' })).toBeVisible();
    await page.getByRole('combobox', { name: 'Поиск', exact: true }).fill('кино');
    await page.getByRole('combobox', { name: 'Поиск', exact: true }).press('Enter');
    await page.getByRole('listitem').first().click();
    const player = page.getByRole('contentinfo', { name: 'Плеер' });
    await player.getByRole('button', { name: 'Добавить в плейлист', exact: true }).click();
    await page.getByRole('button', { name: /Музыка для долгой дороги · 0/ }).click();
    await expect(page.getByRole('dialog')).toHaveCount(0);
    if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
    await page.getByRole('link', { name: 'Плейлисты', exact: true }).click();
    await page.getByRole('link', { name: /Музыка для долгой дороги/ }).click();
    await page.getByRole('button', { name: 'Управлять треками' }).click();
    await expect(page.getByRole('button', { name: /Убрать .* из плейлиста/ })).toBeVisible();
    await expect.poll(() => page.evaluate(() => {
      const main = document.querySelector('main')!;
      return Math.max(document.documentElement.scrollWidth - innerWidth, main.scrollWidth - main.clientWidth);
    })).toBeLessThanOrEqual(1);
    await page.screenshot({ path: info.outputPath('playlist.png') });
  });
}